markdown-it 简介
markdown-it 是一个辅助解析 markdown 的库，可以完成从 # test 到

test

的转换。
它同时支持浏览器环境和 Node 环境，本质上和 babel 类似，不同之处在于，babel 解析的是 JavaScript。
说到解析，实际上称为解释(interpreter)或者编译(compiler)更为令人熟悉。总归绕不开词法分析和语法分析这两个过程。
markdown-it 官方给了一个在线示例，可以让我们直观地得到 markdown 经过解析后的结果。
我们也可以手动执行下面代码得到同样的结果：

text

1 2 3 4

const md = new MarkdownIt()
let tokens = md.parse('# test')
console.log(tokens)

vue使用示例

text

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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

<template>
   <el-row>
     <el-col :span="12">
      <el-input
        style="margin-top: 6px;height: 2500px;min-height:600px;font-size: 20px;"
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea"
        rows="80"
        maxlength="20000"
        show-word-limit
        clearable
        resize="none"
      >
      </el-input>
     </el-col>
     <el-col :span="12">
      <VueMarkdownIt :source='textarea' :plugins='plugins' style="border: 1px solid black;height: 100%;padding-left: 8px;border-radius: 7px;margin-top: 7px;"></VueMarkdownIt>
     </el-col>
   </el-row>
</template>

<script>
import {ref} from 'vue'


import VueMarkdownIt from 'vue3-markdown-it'
import 'highlight.js/styles/monokai.css'

import MarkdownItEmoji from 'markdown-it-emoji'
import MarkdownItDeflist from 'markdown-it-deflist'
import MarkdownItSub from 'markdown-it-sub'
import MarkdownItSup from 'markdown-it-sup'
import MarkdownItAbbr from 'markdown-it-abbr'

export default {
  name: "CreateBlog",
  components: {
   VueMarkdownIt
  },
  setup: function (){
   let textarea = ref('## 博客正文')
   let plugins = reactive([
     {
      plugin: MarkdownItAbbr
     }, {
      plugin: MarkdownItSub
     }, {
      plugin: MarkdownItSup
     }, {
      plugin: MarkdownItDeflist
     }, {
      plugin: MarkdownItEmoji
     }
   ])

   return {
     textarea,
     plugins
   }
  }
}
</script>

模式

markdown-it 提供了三种模式：commonmark、default、zero。分别对应最严格、GFM、最宽松的解析模式。

解析

markdown-it 的解析规则大体上分为块(block)和内联(inline)两种。具体可体现为 MarkdownIt.block 对应的是解析块规则的 ParserBlock， MarkdownIt.inline 对应的是解析内联规则的 ParserInline，MarkdownIt.renderer.render 和 MarkdownIt.renderer.renderInline 分别对应按照块规则和内联规则生成 HTML 代码。

规则

在 MarkdownIt.renderer 中有一个特殊的属性：rules，它代表着对于 token 们的渲染规则，可以被使用者更新或扩展：

text

1 2 3 4 5 6 7

var md = require('markdown-it')();
 
md.renderer.rules.strong_open  = function () { return '<b>'; };
md.renderer.rules.strong_close = function () { return '</b>'; };
 
var result = md.renderInline(...);

比如这段代码就更新了渲染 strong_open 和 strong_close 这两种 token 的规则。

它可以将指定的插件加载到当前的解析器实例中：

text

1 2 3 4 5 6 7

var iterator = require('markdown-it-for-inline');
var md = require('markdown-it')()
         .use(iterator, 'foo_replace', 'text', function (tokens, idx) {
           tokens[idx].content = tokens[idx].content.replace(/foo/g, 'bar');
         });

参考文章
 参考文章

原文地址：https://blog.csdn.net/weixin_46787337/article/details/123670564?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168906542916800213021592%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168906542916800213021592&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-7-123670564-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=markdown