作組件庫使代碼高亮的方法

我的推薦使用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 標籤不能夠出現兩個