Vue- Markdown 使用大全

1. MarkDown 解析器

1.1 使用md格式文件解析 md->html

vue-cli3 中直接将 .md 文件转为 html。我用到的是 webpack 的 vue-markdown-loader，这个 loader 可以直接将 .md 文件转换为 vue 的组件，然后可以直接在页面中使用，非常的方便。

安装

npm i vue-markdown-loader -D
npm i  vue-loader vue-template-compiler -D
# 样式
npm i github-markdown-css -D
npm i highlight.js -D

配置

// vue.config.js 如果没有就在项目根目录新建
module.exports = {
  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
      })
  }
}

使用

<template>
	<!-- class markdown-body 必须加，否则标签样式会出现问题 -->
  <div class="markdown-body">
    <markdown />
  </div>
</template>

<script>
// 引入 markdown 文件，引入后是一个组件，需要在 components 中注册
import markdown from '@/assets/ApiDocument.md'
// 代码高亮
import 'highlight.js/styles/github.css'
// 其他元素使用 github 的样式
import 'github-markdown-css'
export default {
  components: {
    markdown
  },
}
</script>

1.2 字符串解析方案

marked 方案

1、安装marked

npm install marked

2、使用

<div v-html="readmeContent">
 
</div>
 
<script>
  //引入marked
  import marked from 'marked'
  
  export default {
    methods: {
      getMardownFileContent(data) {
		//处理markdown数据，data为markdown文件读出的字符串
		this.readmeContent = marked(data || '', {
		  sanitize: true
		}); 
    },
  }
  
</script>

vue-markdown 方案

npm install vue-loader vue-template-compiler -D
npm install --save vue-markdown

使用

import VueMarkdown from 'vue-markdown'
export default {
  components: {
    VueMarkdown // 注入组件
  },
  data () {
    return { 
      value: "### sdsa" // value的值是要解析的markdown数据
    }
  }
}

使用注入的组件

<VueMarkdown :source="value"></VueMarkdown>

1.3 Markdown 优化方案

1. markdown 样式方案-github-markdown-css

2. 代码高亮方案-highlight.js

1) 安装

npm install highlight.js

2) 编码

Vue自定义指令 文档

// Vue-cli生成的工程文件的src/main.js
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css' //样式文件
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

3) 使用

<p v-html="markdownhtml" v-highlight></p>

到这里我们就打工告成了。

4) 封装成插件

编写插件

// highlight.js
import Vue from 'vue'
import Hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
let Highlight = {}
Highlight.install = function (Vue, options) {
  Vue.directive('highlight', function (el) {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
      Hljs.highlightBlock(block)
    })
  })
}
export default Highlight

使用插件

import Highlight from 'path/to/Highlight.js'
Vue.use(Highlight)

3. 代码行数显示方案-highlightjs-line-numbers.js

2. Markdown 编辑器-mavonEditor

官网

https://github.com/hinesboy/mavonEditor

安装

npm install mavon-editor --save

使用 Vue

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
    // use
Vue.use(mavonEditor)

3. 富文本编辑器解析-vue-quill-editor

官网

https://github.com/surmon-china/vue-quill-editor

使用

可以参考一下方案

https://blog.csdn.net/liuqiao0327/article/details/107126784/