今天要给自己博客代码实现高亮,因为逼格会提高…,
安装, 关于css 是非常多种类型,这个需要你自己去找了,下面是github的css
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css" rel="stylesheet">
多页面使用
// 只要在你代码最后写入下面这段代码就好了,他会在当前页面寻找code节点并高亮显示。
<script>hljs.initHighlightingOnLoad();</script>
单页面SPA, Vue.js
Vue.js 或者是其他angular和React 就不像上面那样那么简单了,因为单页如果像上面那样只会执行一次。当到了其他页面后就不会高亮。下面是Vue.js解决这个问题。
// 定义一个局部指令
directives: {
highlight (element) {
var code = element.querySelectorAll('code');
for(var i = 0; i < code.length; i++) {
hljs.highlightBlock(code[i]);
}
}
}
HTML 使用指令,在你的v-html 指令追加一个自己定义的指令即可, 这样每次都会给代码高亮。
<article v-html="content" v-highlight=“”></article>
如果对css不满意可以去找一款自己满意的或自己实现