Vue---Vue通过highlight.js实现页面代码高亮显示

1.安装vue-highlightjs和highlight.js

npm install --save vue-highlightjs
npm install --save highlight.js

2.main.js中引入并开启使用highlight

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

3.组件页面中使用(其中 class="语言名称" ，不同的语言会显示不一样的效果。)

<pre v-highlightjs>
    <code class="html" style="text-align:left;">{
   
   { code }}</code>
</pre>

4.实现效果