highlight.js实现高亮代码

发表于:2017-10-01

今天要给自己博客代码实现高亮,因为逼格会提高...,

安装, 关于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不满意可以去找一款自己满意的或自己实现

JavaScript
HTML