markdown-it 介绍，以及使用，自定义规则

言小溪

已于 2024-07-13 15:07:45 修改

阅读量7.6k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： JavaScript 【基础】 Vue 【基础】文章标签： html markdown markdown-it js

于 2021-09-16 13:59:00 首次发布

原创声明：本文为博主言小溪的博文，未经博主允许不得转载！

本文链接：https://blog.csdn.net/qq_31254489/article/details/120326897

Vue 【基础】同时被 2 个专栏收录

19 篇文章

订阅专栏

JavaScript 【基础】

17 篇文章

订阅专栏

本文介绍了如何使用markdown-it解析库扩展规则，实现在Markdown文本中添加行号，并展示了如何动态为每一行添加行号属性。通过实例演示了规则添加、token操作和渲染的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

markdown-it

文章目录

markdown-it

markdown-it 是前端的一个 markdown 解析库，将 markdown 解析成 Token 流

网上都有很多详细的 token 流解析过程，请先简单看一遍
markdown-it解析 - 简书 https://www.jianshu.com/p/39ed59f610d4
看完的小伙伴应该一头雾水，下面我们来实践一下

添加规则

首先，如果你需要解析流呢，就要往他的规则里面添加新的规则

	// 添加规则
    md.core.ruler.push('规则名', (state)=> {
   		// code here
		return true;
    });
    // 渲染
    md.render(`# hello word`)

上面的代码在 md 的规则里面添加了一个新的规则 show-line-rule
state 则是一个对象，其中有一个最重要的属性 tokens ，里面包括了解析完成的所有 token 流

例如一行 hello word 就会被解析成 3 个 token 。

xxx_open : 开始 token
inline : 内容 token
xxx_close : 结束 token

每个 token 都会被渲染成 html 标签

xxx_open : <p>
inline : <p>xxx</p>
xxx_close : </p>

渲染结果为 :

<p>
	<p>xxx</p>
</p>

那么我们下面开始添加新的规则，渲染后给每一行加上行数

这里说明一下 token.attrs 的类型为 Array<[string,string]>
第一个 string 是元素的属性名
第二个 string 是元素的属性值

	// 添加规则
    md.core.ruler.push('show-line', (state)=> {
    	// forEach 遍历 tokens
		state.tokens.forEach(token => {
            // token.map 即所在的行数
            if (token.map) {
            	// 起始行
                const start  = ["data-line-start", token.map[0].toString()]
                // 结束行
                const end  = ["data-line-end", token.map[1].toString()]
                // 初始化属性
                token.attrs = token.attrs || []
                // 添加属性
                token.attrs.push(start,end)
            }
        })
		return true;
    });

渲染如下内容

# hello word

# hello word2

渲染结果

<h1 data-line-start="0" data-line-end="1"><a  href="#hello-word">#</a> hello word</h1>
<h1 data-line-start="2" data-line-end="3"><a  href="#hello-word2">#</a> hello word2</h1>

如果你要修改里面的内容呢就会相对复杂，因为每个 token 还可能会有子token，所以这里就不仔细分析了。

常用功能

每次有想法就会在此更新

给特定的元素添加class

md.core.ruler.push('custom-rule', function (state) {
    const tokens = state.tokens
    function handle(tokens) {
        for (const token of tokens) {
            addClass(token, 'table', ['table-striped'])
            addClass(token, 'pre', ['custom'])
            addClass(token, 'blockquote', ['custom'])
            if (token.children?.length) {
                handle(token.children)
            }
        }
    }
    handle(tokens)
})
function addClass(token, tag_name, list) {
    if (token.tag === tag_name) {
        token.attrSet('class', list.join(' '))
    }
}