在Vue中使用highlight.js高亮显示代码
安装npm install highlight.js编码// Vue-cli生成的工程文件的src/main.jsimport hljs from 'highlight.js'import 'highlight.js/styles/googlecode.css' //样式文件Vue.directive('highlight',function (el) {let bloc...
·
安装
npm install highlight.js
编码
// Vue-cli生成的工程文件的src/main.js
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css' //样式文件
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
使用
p v-html="html" v-highlight></p>
ps:特别注意v-html=html中的html内容必须包含:<pre><code>'+html+'</code></pre> pre和code标签
更多推荐
已为社区贡献2条内容
所有评论(0)