diff --git a/docs/content/2.usage/2.markdown.md b/docs/content/2.usage/2.markdown.md index 1a28571b8..91cdd71d5 100755 --- a/docs/content/2.usage/2.markdown.md +++ b/docs/content/2.usage/2.markdown.md @@ -125,7 +125,7 @@ The component must contain either: In a markdown file, use the component with the **`::`** identifier. ::code-group - ```md [index.md] + ```mdc [index.md] ::card The content of the card :: @@ -156,7 +156,7 @@ A component's slots can accept content or another components. - **named** slots use the `#` identifier to render the corresponding content. ::code-group - ```md [index.md] + ```mdc [index.md] ::hero Default slot text @@ -189,7 +189,7 @@ A component's slots can accept content or another components. MDC supports nested components inside slots by indenting them. ::code-group - ```md [index.md] + ```mdc [index.md] ::hero :::card A nested card @@ -230,7 +230,7 @@ The `unwrap` prop accepts an HTML tag that will be used to unwrap the content, u ``` - ```md [index.md] + ```mdc [index.md] ::the-title A [rich text](/) will be **rendered** by the component. :: @@ -256,7 +256,7 @@ Inline components are components without slots or ``. They can be used with the `:` identifier. ::code-group -```md [index.md] +```mdc [index.md] # Title :banner @@ -273,7 +273,7 @@ They can be used with the `:` identifier. If you want to use an inline component followed by specific characters like `-`, `_` or `:`, you can use a dummy props specifier after it. -```md +```mdc :hello{}-world ``` @@ -288,7 +288,7 @@ There are two ways to pass props to components using MDC. The `{}` identifier passes props to components in a terse way by using a `key=value` syntax. ::code-group - ```md [index.md] + ```mdc [index.md] ::alert{type="warning"} The **alert** component. :: @@ -315,7 +315,7 @@ The `{}` identifier passes props to components in a terse way by using a `key=va Multiple props can be separated with a space: -```md +```mdc ::alert{type="warning" icon="exclamation-circle"} Oops! An error occurred :: @@ -323,7 +323,7 @@ Oops! An error occurred The `v-bind` shorthand `:` can be also be used to bind a prop to a value in the front matter. -```md +```mdc --- type: "warning" --- @@ -337,17 +337,17 @@ If you want to pass arrays or objects as props to components you can pass them a Note that in this case you should use single quotes for the value string so you can use double quotes to pass a valid JSON string: ::code-group -```md [array.md] +```mdc [array.md] ::dropdown{:items='["Nuxt", "Vue", "React"]'} :: ``` -```md [number-array.md] +```mdc [number-array.md] ::dropdown{:items='[1,2,3.5]'} :: ``` -```md [object.md] +```mdc [object.md] ::chart{:options='{"responsive": true, "scales": {"y": {"beginAtZero": true}}}'} :: ``` @@ -358,7 +358,7 @@ Note that in this case you should use single quotes for the value string so you The YAML method uses the `---` identifier to declare one prop per line, that can be useful for readability. ::code-group - ```md [index.md] + ```mdc [index.md] ::icon-card --- icon: IconNuxt @@ -413,7 +413,7 @@ The YAML method uses the `---` identifier to declare one prop per line, that can To create inline spans in your text you can use the `[]` identifier. ::code-group - ```md [Code] + ```mdc [Code] Hello [World]{style="background-color: var(--color-primary-500)"}! ``` @@ -429,7 +429,7 @@ Attributes are useful for highlighting and modifying part of paragraph. The synt Possible values ​​are all named attributes, classes with the notation `.class-name` and an ID with `#id-name`. ::code-group - ```md [Code] + ```mdc [Code] Hello [World]{style="color: green;" .custom-class #custom-id}! ``` @@ -464,7 +464,7 @@ You can bind data within your Markdown document using the `{{ $doc.variable || ' ### Example 1: Define in YAML -```md +```mdc --- title: 'Title of the page' description: 'meta description of the page' @@ -491,7 +491,7 @@ const mdcVars = ref({ name: 'Maxime'}); ``` -```md +```mdc # Hello {{ $doc.name || 'World' }} diff --git a/docs/content/4.components/6.content-slot.md b/docs/content/4.components/6.content-slot.md index a0b29f307..9752b1861 100644 --- a/docs/content/4.components/6.content-slot.md +++ b/docs/content/4.components/6.content-slot.md @@ -27,7 +27,7 @@ It is useful when creating components that you want to use in your Markdown cont Then using it in Markdown: -```md [content/index.md] +```mdc [content/index.md] ::fancy-header That text paragraph will be unwrapped. :: diff --git a/docs/content/7.v1/1.getting-started/3.writing.md b/docs/content/7.v1/1.getting-started/3.writing.md index 52588f337..9cedd8b7e 100644 --- a/docs/content/7.v1/1.getting-started/3.writing.md +++ b/docs/content/7.v1/1.getting-started/3.writing.md @@ -232,7 +232,7 @@ It supports by default code highlighting using [PrismJS](https://prismjs.com) an You can write HTML in your Markdown: -```md[home.md] +```md [home.md] --- title: Home --- @@ -302,7 +302,7 @@ But **this will**: Say we have a Vue component called [ExampleMultiselect.vue](https://github.com/nuxt/content/blob/v1.14.0/docs/components/global/examples/ExampleMultiselect.vue): -```md[home.md] +```md [home.md] Please choose a *framework*: @@ -319,7 +319,7 @@ Please choose a framework: You can also define the options for components in your front matter: -```md[home.md] +```md [home.md] --- multiselectOptions: - VuePress diff --git a/docs/content/7.v1/3.community/1.snippets.md b/docs/content/7.v1/3.community/1.snippets.md index 0df8df0d9..aa92b6857 100644 --- a/docs/content/7.v1/3.community/1.snippets.md +++ b/docs/content/7.v1/3.community/1.snippets.md @@ -422,7 +422,7 @@ export default { - Finally use the components and mark the document to fetch the contributors -```md{}[document.md] +```md [document.md] --- title: Nuxt Content fetchContributors: true diff --git a/examples/mdc/inline-component/content/index.md b/examples/mdc/inline-component/content/index.md index 2066cb237..a7e9663e9 100644 --- a/examples/mdc/inline-component/content/index.md +++ b/examples/mdc/inline-component/content/index.md @@ -1,6 +1,6 @@ # Inline Components usage in MDC -```md +```mdc I am using a :github-button in the middle of a paragraph. ```