Vue+highlight代码高亮

首先,在npmjs.com里可以下载highlight代码

地址

cnpm install highlight.js

然后在main.js里加入

import hljs from 'highlight.js'
// import 'highlight.js/styles/atom-one-light.css' //样式文件
import 'highlight.js/styles/github.css' //样式文件
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
});

然后在 需要显示的代码高亮的外围div 里加上 v-highlight即可,

比如

<div class="reply-content" v-highlight v-html="post_content"></div>

note:如果你不喜欢这个配色,可以自由选择不同的css文件,类似上面的main.js里我注释掉的那个…

---

欢迎转载,但请附上原文地址哦,尊重原创,谢谢大家 本文地址: https://www.iphpt.com/detail/101/

---

本站(PHP --> Golang)已重构,代码开源

• Golang版本 代码地址: https://github.com/izghua/go-blog
• 原PHP版本 代码地址: https://github.com/xzghua/laravel-5-myblog

---