【vue】vue2.x项目中使用md文件

一、Vue项目展示md文件的三种方式

1、将md文件 导入为 html

生成的标题标签自带具有id属性，值为标题内容；
<h2 id="测试">测试</h2>

# 处理md为html字符串,内部依赖了 marked
yarn add markdown-loader
# 处理字符串，用于导出显示
yarn add html-loader

module.exports = defineConfig({
...
  chainWebpack: (config) => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  },
})

2、将md文件 导入为 vue组件（用于简单展示md可行）

转换后：生成新的html标签包住，没有id属性，不好进行其他操作；
<h2 >测试</h2>

yarn add vue-markdown-loader

  chainWebpack: (config) => {
    config.module
     .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true,
      })
  },

3、输出md原始语法，使用 marked或markdown-it或markdown-it-vue等插件解析

# 配置导入md文件的loader
yarn add html-loader

  chainWebpack: (config) => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
  },

marked

介绍：

• 解析后默认标题为id
• markdown-loader使用了该插件；
• 将md语法的字符串转为html标签字符串；
• marked 是一个 JavaScript 编写的全功能 Markdown 解析和编译器；最初是为 Node.JS 编写，现在已完全兼容客户端浏览器；
• 需要一些其他依赖来增强功能；

yarn add marked

// 使用
<div v-html="mdHtml"></div>
---
import { marked } from 'marked'
this.mdHtml = marked('## hello')
// <h2 id="hello">hello</h2>

markdown-it

介绍：

• 解析后默认不带id，需要配置；
• markdown-it-vue封装了该插件；
• 用于将md语法字符串转为html语法字符串，同marked；
• Markdown 解析器，100% CommonMark 支持，易扩展
• 需要一些其他依赖来增强功能；

yarn add markdown-it

// 使用
<div v-html="mdHtml"></div>
---
import MarkdownIt from 'markdown-it'
const md = new MarkdownIt()
this.mdHtml = md.render('## hello')
// <h2>hello</h2>

markdown-it-vue

• 缺点：依赖包太大；
• 封装了markdown-it、github-markdown-css、highlight.js等一些插件；

<MarkdownItVue :content="mdHtml"></MarkdownItVue>
---
import a from './a.md'
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'

  created() {
    this.mdHtml = a
  },

样式说明

使用不同样式风格，可引入相关插件

# 样式
yarn add github-markdown-css
import 'github-markdown-css'

代码高亮

highlight.js

对于使用vue-markdown-loader，直接入口文件引入即可

yarn add highlight.js
# 风格按需选择，这里使用github.css
import 'highlight.js/styles/github.css'

对于使用markdown-loader，代码高亮需要额外配置，以下两种方式都可以

import hljs from 'highlight.js'
// 方式一：指令v-highlight
Vue.directive('highlight', function (el) {
  hljs.configure({ useBR: true })
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
    hljs.highlightBlock(block)
  })
})
// 使用
// <div class="markdown-body" v-html="mdHtml" v-highlight></div>

// 方式二：全局配置
Vue.prototype.$hljs = hljs
// 使用
<div class="markdown-body" v-html="mdHtml"></div>
---
  mounted() {
     this.$hljs.highlightAll()
  },

推荐代码高亮工具：prismjs、babel-plugin-prismjs

<div class="markdown-body line-numbers" v-html="mdHtml"></div>
  mounted() {
    this.$prism.highlightAll()
  },

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  // 配置md代码高亮插件
  plugins: [
    [
      'prismjs',
      {
        languages: [
          'html',
          'css',
          'js',
          'php',
          'dart',
          'bash',
          'java',
          'nginx',
          'python',
        ],
        plugins: ['line-numbers', 'show-language', 'copy-to-clipboard'],
        theme: 'tomorrow',
        css: true,
      },
    ],
  ],
}

二、扩展

• Markdown 编辑器-mavonEditor
• 富文本编辑器解析-vue-quill-editor