@nuxt/markdown
A Nuxt-flavoured fork of @dimerapp/markdown that features granular control unified stream.
Install
npm i @nuxt/markdown --saveUsage
import Markdown from '@nuxt/markdown'
const md = new Markdown({ toc: false, sanitize: false })
const contents = await md.toMarkup(markdownSourceString)Processing layers
import Markdown from '@nuxt/markdown'
import remarkContainer from 'remark-container'
const md = new Markdown({
extend({ layers }) {
layers['remark-container'] = remarkContainer
}
})
const rendered = await md.toMarkup(markdownSourceString)Assigning is equivalent to pushing to the last second position of the internal layers Array.
This is because the last step is rehype-stringify, responsible for the final HTML output, but we still want to be able to customize/remove that if needed.
You can also use Array methods directly:
const md = new Markdown({
extend({ layers }) {
layers.splice(pos, 0, ['remark-container', remarkContainer])
}
})This is the default layers Array provided to a @nuxt/markdown instance:
const layers = [
['remark-parse', remarkParse],
['remark-slug', remarkSlug],
['remark-autolink-headings', autolinkHeadings],
['remark-macro', macroEngine.transformer],
['remark-squeeze-paragraphs', squeezeParagraphs],
['remark-rehype', remarkRehype, { allowDangerousHTML: true }],
['rehype-raw', rehypeRaw],
['rehype-prism', rehypePrism, { ignoreMissing: true }],
['rehype-stringify', rehypeStringify]
]Each layer begins with an arbitrary id, to make addressing specific layers easier.
Custom remark-rehype handlers
You can also pass in a handlers object to the Markdown constructor to define custom remark-rehype handlers.
See a list of available overridable handlers here.
Adding macros
@nuxt/markdown includes remark-macro, a nifty library that adds macro support to Markdown files. To add macros, use the extend() function like in the previous examples:
import Markdown from '@nuxt/markdown'
const md = new Markdown({
extend({ macros }) {
macros.alert = (content, props, { transformer, eat }) => {
return {
type: 'AlertNode',
data: {
hName: 'div',
hClassNames: ['alert alert-note'],
hChildren: transformer.tokenizeBlock(content, eat.now())
}
}
}
}
})
const markdown = `
# Hello world
[alert]
This is an alert
[/alert]
`
const rendered = await md.toMarkup(markdown)Example taken from dimerapp/remark-macro.
NuxtPress roadmap
@nuxt/markdown was created mainly for NuxtPress and is part of its roadmap.
![renovate[bot]](https://avatars.githubusercontent.com/u/29139614?size=120)