nuxt中将markdown文件转换html并带有高亮提示

在http://fileup.marsdl.com/menu的网站中，每一篇的博客文章是通过markdown编辑后直接保存markdown内容在数据库中。博客内容显示时获取md内容将其转换成带有高亮的html内容。
主要思路就是markdown-it将md内容转换成html内容，比如##标题 变成 <h2>标题</h2>，然后highlight.js文件专门对html内容中生成的html标签进行 css 样式渲染使其更加美观。
比如<precode> 标签就添加一系列的样式，如下图中的xml代码就有特别的样式了。无需我们自己手动针对性的编写css样式。

在nuxt的plugins文件夹内添加一个highlight.js文件，文件内容如下。
首先需要执行安装highlight.js，执行命令npm install highlight --save

// highlight.js  代码高亮指令
import Hljs from 'highlight.js';
// 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件
import 'highlight.js/styles/tomorrow-night.css'; 

let Highlight = {};
// 自定义插件
Highlight.install = function (Vue) {
    // 自定义指令 v-highlight
 Vue.directive('highlight', {
  // 被绑定元素插入父节点时调用
   inserted: function (el) {
     let blocks = el.querySelectorAll('pre code');
     for (let i = 0; i < blocks.length; i++) {
         Hljs.highlightBlock(blocks[i]);
     }
   },
   // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
   componentUpdated: function (el) {
    let blocks = el.querySelectorAll('pre code');
    for (let i = 0; i < blocks.length; i++) {
        Hljs.highlightBlock(blocks[i]);
    }
   }
 })
};
export default Highlight;

在nuxt.config.js文件中引入该文件，引入方式如图中，highlight.js文件引入后只需要highlight就可以，不用带有后缀。

安装完成好highlight.js后需要结合markdown-it对md内容进行渲染成高亮的html内容，在相应的vue文件中添加如下js内容。

import "github-markdown-css/github-markdown.css";
var hljs = require("highlight.js");
import axios from "axios";

var md = require("markdown-it")({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {}
    }
    return ""; // 使用额外的默认转义
  },
});

然后export default {}中调用即可，这里的md就是上面var md = require(“markdown-it”)生成的md全局变量。我在某个方法内使用的方式如下：

let blogData = md.render(htmlData.blogData);