做元件庫使程式碼高亮的方法

洗劍發表於2019-01-27
元件
個人推薦使用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 標籤不可以出現兩個 

相關文章