安装配置

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

main.js

import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/monokai-sublime.css'
Vue.use(VueHighlightJS)

使用

vue文件中

<pre v-highlightjs>
  <code class="javaScript">{{code}}</code>
</pre>

根据代码类型修改class的值，比如HTML代码，则class=‘html’

高亮显示的代码写在data里的code变量里

data() {
    return {
        code: '<h1>标题</h1>',
    }
},

最终效果

vue 代码高亮 highlight.js vue-highlightjs_代码类