@nuxt/markdown
Nuxt-flavoured fork of @dimerapp/markdown
Last updated a year ago by galvez .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @nuxt/markdown 
SYNC missed versions from official npm registry.

@nuxt/markdown

A Nuxt-flavoured fork of @dimerapp/markdown that features granular control unified stream.

Install

npm i @nuxt/markdown --save

Usage

import Markdown from '@nuxt/markdown'

const md = new Markdown({ toc: false, sanitize: false })
const contents = await md.toHTML(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.

Current Tags

  • 0.0.21                                ...           latest (a year ago)

23 Versions

  • 0.0.21                                ...           a year ago
  • 0.0.20                                ...           a year ago
  • 0.0.19                                ...           a year ago
  • 0.0.18                                ...           a year ago
  • 0.0.17                                ...           a year ago
  • 0.0.16                                ...           a year ago
  • 0.0.15                                ...           a year ago
  • 0.0.14                                ...           a year ago
  • 0.0.13                                ...           a year ago
  • 0.0.12                                ...           a year ago
  • 0.0.11                                ...           a year ago
  • 0.0.10                                ...           a year ago
  • 0.0.9-c                                ...           a year ago
  • 0.0.9-b                                ...           a year ago
  • 0.0.9                                ...           a year ago
  • 0.0.8                                ...           a year ago
  • 0.0.7                                ...           a year ago
  • 0.0.6                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.4                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           a year ago
Downloads
Today 0
This Week 23
This Month 23
Last Day 23
Last Week 0
Last Month 35
Dependencies (20)
Dev Dependencies (10)
Dependents (2)

Copyright 2014 - 2016 © taobao.org |