vue-highlightjs的使用小結

萬能的 github真主，讓咱們強大！
在vue的項目中想使用 highlight.js這樣的代碼高亮？有人幫助咱們實現了 vue-highlightjs

• 安裝

yarn add highlight.js -D
yarn add vue-highlight.js -D

這裏解釋一下爲何要安裝兩個依賴：vue-highlight.js只是實現了代碼高亮的功能，他的安裝包裏是沒有css的樣式文件的，所以咱們還須要安裝一個highlight.js來實現真正的樣式。

• 引用

在咱們的入口文件main.js中引用依賴

import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)

咱們使用的是atom-one-dark.css這個樣式文件，能夠根據
highlight.js官網上的面配色自定義本身的展現效果。也能夠看咱們項目中安裝的highlight.js中的文件去看是否具有這個樣式表。

• 使用

由於已經實現了vue的組件化，因此使用起來很是傻瓜...

// demo.vue
<template>
<pre v-highlightjs>
    <code class="css">
        {
          border: 1px solid #fff;
        }
    </code>
</pre>
</template>

• 參考

highlight.js demo地址
vue-highlightjs github地址