UNPKG

1.76 kBMarkdownView Raw
1# @nuxt/markdown
2
3A 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
8npm i @nuxt/markdown --save
9```
10
11## Usage
12
13```js
14import Markdown from '@nuxt/markdown'
15
16const md = new Markdown({ toc: false, sanitize: false })
17const contents = await md.toHTML(markdownSourceString)
18```
19
20## Processing layers
21
22```js
23import Markdown from '@nuxt/markdown'
24import remarkContainer from 'remark-container'
25
26const md = new Markdown({
27 extend({ layers }) {
28 layers['remark-container'] = remarkContainer
29 }
30})
31
32const rendered = await md.toMarkup(markdownSourceString)
33```
34
35Assigning is equivalent to **pushing** to the internal layers Array. You can also use Array methods directly:
36
37```js
38const 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
50import Markdown from '@nuxt/markdown'
51
52const 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
67const markdown = `
68# Hello world
69
70[alert]
71This is an alert
72[/alert]
73`
74
75const rendered = await md.toMarkup(markdown)
76```
77
78Example taken from [dimerapp/remark-macro](https://github.com/dimerapp/remark-macro).