You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
That's it! You can start writing and rendering markdown files ✨
48
48
49
-
Parse MDC content in any environment:
49
+
## Parsing Markdown
50
50
51
-
```ts [parse-mdc.ts]
51
+
Nuxt MDC exposes a handy helper to parse MDC files. You can import the `parseMarkdown` function from `@nuxtjs/mdc/runtime` and use it to parse markdown files written with MDC syntax.
The `parseMarkdown` helper also accepts options as the second argument to control the parser's behavior. (Checkout [`MDCParseOptions` interface↗︎](https://github.com/nuxt-modules/mdc/blob/main/src/runtime/types/parser.ts)).
`@nuxtjs/mdc` exposes three components to render markdown files.
114
+
115
+
### `<MDCRenderer>`
116
+
117
+
This component will take the result of [`parseMarkdown`](#parsing-markdown) function and render the contents. For example, this is an extended version of the sample code in the [Browser section](#browser) which uses `MDCRenderer` to render the parsed markdown.
This component is a replacement for Vue's `<slot/>` component, specifically designed for MDC. Using this component, you can render a component's children while removing one or multiple wrapping elements. In the below example, the Alert component receives text and its default slot (children). But if the component renders this slot using the normal `<slot/>`, it will render a `<p>` element around the text.
141
+
142
+
```md [markdown.md]
143
+
::alert
144
+
This is an Alert
145
+
::
61
146
```
62
147
63
-
Render MDC content with `<MDC>` component:
148
+
```html [Alert.vue]
149
+
<template>
150
+
<divclass="alert">
151
+
<!-- Slot will render <p> tag around the text -->
152
+
<slot />
153
+
</div>
154
+
</template>
155
+
```
156
+
157
+
It is the default behavior of markdown to wrap every text inside a paragraph. MDC didn't come to break markdown behavior; instead, the goal of MDC is to make markdown powerful. In this example and all similar situations, you can use `<MDCSlot />` to remove unwanted wrappers.
158
+
159
+
```html [Alert.vue]
160
+
<template>
161
+
<divclass="alert">
162
+
<!-- MDCSlot will only render the actual text without the wrapping <p> -->
163
+
<MDCSlotunwrap="p" />
164
+
</div>
165
+
</template>
166
+
```
167
+
168
+
### `<MDC>`
169
+
170
+
Using `<MDC>`, you can parse and render markdown contents right inside your components/pages. This component takes raw markdown, parses it using the `parseMarkdown` function, and then renders it with `<MDCRenderer>`.
64
171
65
172
```html
66
173
<template>
67
-
<MDC:value="md"tag="article" />
174
+
<MDC:value="md"tag="article" />
68
175
</template>
69
176
70
177
<scriptsetuplang="ts">
@@ -76,16 +183,113 @@ Hello MDC
76
183
</script>
77
184
```
78
185
79
-
## 💻 Development
186
+
### Prose Components
187
+
188
+
Prose components are a list of components that will be rendered instead of regular HTML tags. For example, instead of rendering a `<p>` tag, `@nuxtjs/mdc` renders a `<ProseP>` component. This is useful when you want to add extra features to your markdown files. For example, you can add a `copy` button to your code blocks.
189
+
190
+
You can disable prose components by setting the `prose` option to `false` in `nuxt.config.ts`. Or extend the map of prose components to add your own components.
0 commit comments