Vue中实现代码高亮功能

1. 首先需要下载依赖：
   npm install highlight.js --save
2. 在main.js文件中导入包：

import hljs from 'highlight.js' //导入代码高亮文件
import 'highlight.js/styles/monokai-sublime.css'  //导入代码高亮样式

3. 同样是在main.js文件中自定义一个指令：

//自定义一个代码高亮指令
Vue.directive('highlight',function (el) {
  let highlight = el.querySelectorAll('pre code');
  highlight.forEach((block)=>{
      hljs.highlightBlock(block)
  })
})

4. 在vue文件中使用指令：

<div class="article_content" v-highlight>
        <div class="head">
          <h2><span class="article-type">{{article_type}}span>{{title}}h2>
          <span>{{time}}span><span>作者:{{author}}span><span>阅读数:{{count_read}}span><span>分类:{{blog_type}}span>
        div>
        <hr style="margin: 15px 0;">
        <div v-html="input">div>
      div>

上图：

至此，已经成功实现了代码高亮。