vue使用highlight.js

安装

npm install highlight.js [--save-dev]

使用

main.js

import hljs from 'highlight.js' // 引入JS
import 'highlight.js/styles/googlecode.css' //样式文件
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})
<!-- 在pre code的父容器上添加v-highlight指令 -->
<p v-html="markdownhtml" v-highlight></p>

引入了highlight.js却无法达到预期的效果

可以参考:vue使用highlight.js的坑

报错了

Property 'forEach' does not exist on type 'NodeListOf<Element>'

是因为我使用的是typeScript缘故,需要进行类型转换:

Last modification:May 5th, 2018 at 06:18 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment