本文主要是介绍vue 代码高亮 highlight.js vue-highlightjs，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

安装配置

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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！