1 | # @nuxt/markdown
|
2 |
|
3 | A Nuxt-flavoured fork of [`@dimerapp/markdown`](https://github.com/dimerapp/markdown) that features granular control [unified](https://github.com/unifiedjs/unified) stream.
|
4 |
|
5 | ## Install
|
6 |
|
7 | ```sh
|
8 | npm i @nuxt/markdown --save
|
9 | ```
|
10 |
|
11 | ## Usage
|
12 |
|
13 | ```js
|
14 | import Markdown from '@nuxt/markdown'
|
15 |
|
16 | const md = new Markdown({ toc: false, sanitize: false })
|
17 | const contents = await md.toHTML(markdownSourceString)
|
18 | ```
|
19 |
|
20 | ## Processing layers
|
21 |
|
22 | ```js
|
23 | import Markdown from '@nuxt/markdown'
|
24 | import remarkContainer from 'remark-container'
|
25 |
|
26 | const md = new Markdown({
|
27 | extend({ layers }) {
|
28 | layers['remark-container'] = remarkContainer
|
29 | }
|
30 | })
|
31 |
|
32 | const rendered = await md.toMarkup(markdownSourceString)
|
33 | ```
|
34 |
|
35 | Assigning is equivalent to **pushing** to the internal layers Array. You can also use Array methods directly:
|
36 |
|
37 | ```js
|
38 | const md = new Markdown({
|
39 | extend({ layers }) {
|
40 | layers.push(['remark-container', remarkContainer])
|
41 | }
|
42 | })
|
43 | ```
|
44 |
|
45 | ## Adding macros
|
46 |
|
47 | **@nuxt/markdown** includes [remark-macro](https://github.com/dimerapp/remark-macro), a nifty library that adds macro support to Markdown files. To add macros, use the `extend()` function like in the previous examples:
|
48 |
|
49 | ```js
|
50 | import Markdown from '@nuxt/markdown'
|
51 |
|
52 | const md = new Markdown({
|
53 | extend({ macros }) {
|
54 | macros.alert = (content, props, { transformer, eat }) => {
|
55 | return {
|
56 | type: 'AlertNode',
|
57 | data: {
|
58 | hName: 'div',
|
59 | hClassNames: ['alert alert-note'],
|
60 | hChildren: transformer.tokenizeBlock(content, eat.now())
|
61 | }
|
62 | }
|
63 | }
|
64 | }
|
65 | })
|
66 |
|
67 | const markdown = `
|
68 | # Hello world
|
69 |
|
70 | [alert]
|
71 | This is an alert
|
72 | [/alert]
|
73 | `
|
74 |
|
75 | const rendered = await md.toMarkup(markdown)
|
76 | ```
|
77 |
|
78 | Example taken from [dimerapp/remark-macro](https://github.com/dimerapp/remark-macro).
|