作组件库使代码高亮的方法

我的推荐使用highlight.js 官网

1使用高亮的框架时 建议最好查查本身使用的UI框架是否有阻止拷贝代码 若是有请先处理UI框架

2 使用npm 下载highlight.js 包 

npm install --save highlight.js -S
复制代码

3 在assets中建立highlight的文件夹 在这个文件夹下建立highlight.js

注：这两个文件夹及文件名不是固定的 

4  在js文件夹中写入如下内容

import Vue from 'vue';
import Hljs from 'highlight.js';
//monokai-sublime.css能够改样式，好比背景透明能够是lightfair.css
import 'highlight.js/styles/monokai-sublime.css';
let Highlight = {};
Highlight.install = function (Vue, options) {
  // 先有数据再绑定，调用highlightA
  Vue.directive('highlightA', {
    inserted: function(el) {
      let blocks = el.querySelectorAll('pre code');
      for (let i = 0; i < blocks.length; i++) {
        const item = blocks[i];
        Hljs.highlightBlock(item);
        Hljs.highlightBlock(item);
      }
    }  });
  // 先绑定，后面会有数据更新，调用highlightB
  Vue.directive('highlightB', {     componentUpdated: function(el) {        let blocks = el.querySelectorAll('pre code');      for (let i = 0; i < blocks.length; i++) {           const item = blocks[i];           Hljs.highlightBlock(item);     }    }   }); };
 export default Highlight;复制代码

5 在main.js中配置路径

import Highlight from './assets/highlight/highlight'
Vue.use(Highlight)
复制代码

6 在你想高亮的vue文件中写入代码 以下

<template>
    <div>
        <pre v-highlight-a>
          <code>{{data}}}</code>
        </pre>
    </div>
</template>

<script>
    export default {
        name: "preCode",
        data(){
          return{
            "data":"<li>\n" +
              " <a href=\"javascript:;\">\n" +
              " <svg class=\"icon\" aria-hidden=\"true\">\n" +
              " <use xlink:href=\"#icon-social-qq\"></use>\n" +
              " </svg>\n" +
              " </a>\n" +
              " </li>"
          }
        }
    }
</script>

<style scoped>

</style>
复制代码

注：这里有个小bug 必定要看 在vue中 script 标签不能够出现两个