Skip to content

Commit

Permalink
docs: use mdc syntax highlight
Browse files Browse the repository at this point in the history
  • Loading branch information
Atinux committed Nov 2, 2023
1 parent d286c0d commit 7dcbf13
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 23 deletions.
34 changes: 17 additions & 17 deletions docs/content/2.usage/2.markdown.md
Expand Up @@ -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
::
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -230,7 +230,7 @@ The `unwrap` prop accepts an HTML tag that will be used to unwrap the content, u
</template>
```

```md [index.md]
```mdc [index.md]
::the-title
A [rich text](/) will be **rendered** by the component.
::
Expand All @@ -256,7 +256,7 @@ Inline components are components without slots or `<ContentSlot />`.
They can be used with the `:` identifier.

::code-group
```md [index.md]
```mdc [index.md]
# Title
:banner
Expand All @@ -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
```

Expand All @@ -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.
::
Expand All @@ -315,15 +315,15 @@ 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
::
```

The `v-bind` shorthand `:` can be also be used to bind a prop to a value in the front matter.

```md
```mdc
---
type: "warning"
---
Expand All @@ -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}}}'}
::
```
Expand All @@ -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
Expand Down Expand Up @@ -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)"}!
```

Expand All @@ -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}!
```

Expand Down Expand Up @@ -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'
Expand All @@ -491,7 +491,7 @@ const mdcVars = ref({ name: 'Maxime'});
</script>
```

```md
```mdc
# Hello {{ $doc.name || 'World' }}
Expand Down
2 changes: 1 addition & 1 deletion docs/content/4.components/6.content-slot.md
Expand Up @@ -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.
::
Expand Down
6 changes: 3 additions & 3 deletions docs/content/7.v1/1.getting-started/3.writing.md
Expand Up @@ -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
---
Expand Down Expand Up @@ -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*:

<example-multiselect :options="['Vue', 'React', 'Angular', 'Svelte']"></example-multiselect>
Expand All @@ -319,7 +319,7 @@ Please choose a <i>framework</i>:

You can also define the options for components in your front matter:

```md[home.md]
```md [home.md]
---
multiselectOptions:
- VuePress
Expand Down
2 changes: 1 addition & 1 deletion docs/content/7.v1/3.community/1.snippets.md
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion 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.
```

Expand Down

0 comments on commit 7dcbf13

Please sign in to comment.