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

个人推荐使用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 标签不可以出现两个