安装配置
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>',
}
},
最终效果