vue项目使用highlight.js 代码高亮插件的使用,并给它添加行数

效果图 

我这里将他封装了，在main中引入即可使用，'./utils/highlight' 是我的目录 改成自己的

// main中引入语法高亮配置
import Highlight from './utils/highlight'
Vue.use(Highlight)

使用： 使用v-highlight标识即可

<div v-html="infoData.content" v-highlight id="vhtml"></div>

封装： 

/**
 * highlight.js  代码高亮,带行数
 * 在 main 中引入即可
 * author zwb
 */
import Vue from 'vue'
import Hljs from 'highlight.js'
import 'highlight.js/styles/solarized-dark.css'
let Highlight = function (Vue, options) {
  Vue.directive('highlight', function (el) {
    let blocks = el.querySelectorAll('pre code'); // querySelectorAll可以根据自己的富文本生成的代码做调整 我这里默认刚好
    blocks.forEach((block) => { // 在forEach中做一些操作
      // 1.创建ul节点
      let ul = document.createElement("ul");
      // 2.根据换行符获取行数，根据获取的行数生成行号
      let rowCount = block.outerHTML.split('\n').length;
      for(let i=1;i <= rowCount;i++){
        //创建li节点，创建文本节点
        let li = document.createElement("li")
        let text = document.createTextNode(i)
        //为li追加文本节点，将li加入ul
        li.appendChild(text)
        ul.appendChild(li)
      }
      // 3.给行号添加类名
      ul.className = 'pre-numbering'
      // 4.将ul节点加到 代码块
      block.parentNode.appendChild(ul)
      Hljs.highlightBlock(block)
    })
  })
}
export default Highlight

由于添加了行数  需要添加一点css样式，vue项目的话 将其添加到 public目录中的 index.html

pre {
    position: relative;
    margin-bottom: 24px;
    background: #FFF;
    overflow: hidden;
    font-size: 16px;
}
.pre-numbering {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    padding: 12px 2px 12px 0;
    border-right: 1px solid #C3CCD0;
    background-color: #EEE;
    text-align: right;
}
.pre-numbering li{
    list-style:none;
    font-family: Menlo, monospace;
    color: #AAA;
}