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

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

1、将md文件 导入为 html

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

# 处理md为html字符串
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

   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原始语法，使用 markdown-it-vue 插件展示

markdown-it-vue 是一个丰富的 markdown Vue 组件，自带了很多功能

# 用于直接展示md语法
yarn add markdown-it-vue
# 处理html字符串为js
yarn add html-loader

    config.module.rule('md').test(/\.md$/).use('html-loader').loader('html-loader').end()

<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,},],],
}

二、补充：

marked 插件

markdown-loader即封装了它；

作用：将md语法的字符串转为html标签字符串；

yarn add marked

// 使用
<div v-html="mdHtml"></div>
---
let mdHtml = marked('## hello')

markdown-it-vue 插件

用于将html展示成md风格；
常与 方式1生成的html配套使用；

yarn add markdown-it-vue

三、扩展

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