Vue渲染Markdown数据

一 ，前言

由于需要，要把Markdown数据渲染在页面上。刚开始在网上找了一大圈，要么只能把md文件通过插件转换为vue组件来渲染，虽然有通过Markdown数据来渲染，但是出来的结果不太理想。在看完几篇关于vue渲染Markdown的文章后，经过一番尝试，终于弄好了。

二，实现过程

• 需要提前安装的npm包

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

• 在安装vue-markdown插件

npm install --save vue-markdown

• 然后在需要用到的地方引入刚刚安装的插件

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

• 使用注入的组件

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

• 相关配置信息参考vue-markdown
• 使用vue-markdown后的效果
  
• 现在看着不是很理想，接着处理
• 通过npm安装，需要用到的样式包

npm install github-markdown-css

• 在main文件，引入css文件

import 'github-markdown-css/github-markdown.css'

• 添加类名：markdown-body

<div class="markdown-body">
    <VueMarkdown :source="value"></VueMarkdown>
</div>

• 添加样式之后的效果
  
• 紧接着添加代码高亮效果
• 通过npm安装需要的包

npm install highlight.js

• 在mian文件中编写vue自定义指令

import 'github-markdown-css/github-markdown.css'
import hljs from 'highlight.js'
// 如果开启了typescript 需要额外安装 npm install @types/highlight.js
// 通过 import * as hljs from 'highlight.js' 引入
Vue.directive('highlight', function (el) {
  const blocks = el.querySelectorAll('pre code')
  blocks.forEach(block => {
    hljs.highlightBlock(block)
  })
})
// 也可以把这自定义指令封装 通过Vue.use()，来注入

• 使用自定义指令 v-highlight

 <div class="markdown-body">
     <VueMarkdown :source="value" v-highlight></VueMarkdown>
 </div>

• 添加代码高亮后的效果
  

三，总结

记录一下，免得到时候，又搞半天。
关于Markdown数据保存至服务器和从服务器获取Markdown数据，个人觉得可以将Markdown进行编码，我使用的是Base64，使用Base64需要注意一些字符会被转换为html格式的编码（比如：’ < >）

• 参考文章：
  VUE-CLI3 直接将 MARKDOWN 转为 HTML
  在Vue中使用highlight.js
  github-markdown-css 使用简解