跳到主要内容
版本：0.17.0+

develop-remark-plugin

  1. develop own markdown parser or renderer
    1. where does code fence define
    2. re-read remark-parse
    3. from 'remark-parse' to 'madst-util-from-markdown'
    4. from 'mdast-util-directive' to 'remark-util-directive'
    5. codes
  2. For markdown plugin develop, what I installed...
  3. add plugin of remark-admonitions micromark +-----------------------------------------------------------------------------------------------+ | +------------+ +-------+ +-------------+ +---------+ | | -markdown->+ preprocess +-chunks->+ parse +-events->+ postprocess +-events->+ compile +-html- | | +------------+ +-------+ +-------------+ +---------+ | +-----------------------------------------------------------------------------------------------+

develop own markdown parser or renderer​

picture 39picture 40picture 41

where does code fence define​

picture 42
graveAccent: '`'
picture 43ref: https://github.com/micromark/micromark/blob/1b378e72675b15caff021f957a824d1f01420774/packages/micromark-util-symbol/values.jspicture 44ref: https://github.com/micromark/micromark/blob/1b378e72675b15caff021f957a824d1f01420774/packages/micromark-core-commonmark/dev/lib/code-fenced.js

re-read remark-parse​

picture 45picture 47picture 48

what's micromarkExtensions picture 49

found block sign! picture 50
ref: https://github.com/micromark/micromark-extension-directive

from 'remark-parse' to 'madst-util-from-markdown'​

picture 51picture 53picture 52picture 54

from 'mdast-util-directive' to 'remark-util-directive'​

codes​

the base of parse

picture 37

mdast uses many interfaces from mdast

The only thing remark-parse does is to call mdast-util-from-markdown

For markdown plugin develop, what I installed...​

picture 58

In fact, I need none of them except:

{
  "remark": "^13.0.0",
  "remark-directive": "^2.0.1",
  "remark-parse": "^10.0.1"
}

refer: gatsby

handbook

⭐️⭐️⭐️ An AAAAAAAAAAwesome adn detailed tutorial from real practice of building a beautiful block code

An AAAAAwesome tutorial, except a bit easy and old

An awesome video tutorial

source code of msat

official remark plugins list

official mdast reference

a loaders intro of chinese

webpack remark loader homepage

A good article except not so detailed

A deeper article based on Asynchronous plugin

A plugin based on visit block

add plugin of remark-admonitions​

refer: rehype