vue使用markdown

最新推荐文章于 2025-06-11 18:07:22 发布

weixin_46787337

最新推荐文章于 2025-06-11 18:07:22 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_46787337/article/details/123670564

本文介绍了markdown-it库在Vue中的应用，展示了如何使用它创建一个支持多种插件的Markdown编辑器，包括表情、定义列表等。通过实例代码演示了如何定制渲染规则和加载插件，适合前端开发者实现Markdown格式内容的实时转换。

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

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

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

vue使用示例

<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 们的渲染规则，可以被使用者更新或扩展：

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 的规则。

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

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');
            });