mdx

字数 534 · 2021-07-16

unified - interface for processing text using syntax trees

https://github.com/unifiedjs/unified
https://github.com/remarkjs/remark
https://github.com/mdx-js/mdx

https://prettier.io/docs/en/index.html

unified

  • plugin - take syntax trees and inspect/modify them
  • parser - text -> syntax tree
  • compiler - syntax tree -> text
1
2
3
4
5
6
7
8
9
10
11
12
| ........................ process ........................... |
| .......... parse ... | ... run ... | ... stringify ..........|

          +--------+                     +----------+
Input ->- | Parser | ->- Syntax Tree ->- | Compiler | ->- Output
          +--------+          |          +----------+
                              X
                              |
                       +--------------+
                       | Transformers |
                       +--------------+

utilities

processors

  • rehype (hast) — HTML
  • remark (mdast) — Markdown
  • retext (nlcst) — Natural language

vfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkPresetLintMarkdownStyleGuide from 'remark-preset-lint-markdown-style-guide'
import remarkRetext from 'remark-retext'
import retextEnglish from 'retext-english'
import retextEquality from 'retext-equality'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import { reporter } from 'vfile-reporter'

unified()
  .use(remarkParse)
  .use(remarkPresetLintMarkdownStyleGuide)
  .use(remarkRetext, unified().use(retextEnglish).use(retextEquality))
  .use(remarkRehype)
  .use(rehypeStringify)
  .process('*Emphasis* and _stress_, you guys!')
  .then(
    (file) => {
      console.error(reporter(file))
      console.log(String(file))
    },
    (error) => {
      // Handle your error here!
      throw error
    }
  )

// <p><em>Emphasis</em> and <em>stress</em>, you guys!</p>

remark

1
npm install remark-cli
1
remark -u remark-frontmatter test.md --tree-out -o
  • -u - use plugins
  • -o - output location
  • -r - specify configuration file

rc file

1
2
3
4
exports.plugins = [
  'remark-frontmatter',
  'remark-html'
]

Plugins

https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins

rehype

Plugins

https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins

mdast-util

https://github.com/syntax-tree/mdast-util-from-markdown
https://github.com/syntax-tree/mdast-util-to-markdown

https://github.com/syntax-tree/mdast-util-gfm-table

https://github.com/micromark/micromark