每日一库

背景

对于经常接触到代码程序员来说一段代码是否易读决定了自己的工作效率，代码易读除了改善代码质量外还能通过高亮关键词来加快阅读速度。Highlightjs就是今天的主角，Highlightjs支持多种语言、多种配色，总有一种适合我们的。

实现

<pre class="brush:php;toolbar:false">
    <?php echo "Hello zeifun.com/">Zeifun" ?>
</pre>

<link href="https://cdn.staticfile.org/highlight.js/10.7.2/styles/atom-one-dark.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/highlight.js/10.7.2/highlight.min.js"></script> 
<script src="https://cdn.staticfile.org/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script> 
<script>
    // 自行引入jquery
    $(function(){
        var $code = $('pre');
        $code.wrapInner("<code></code>");
        hljs.highlightAll();
        hljs.initLineNumbersOnLoad();
    });
</script>

说明：

• 编辑器通常只能生成pre标签，所以需要在内部额外生成code标签

• 高亮样式有很多种，自行到官网查找

• 代码块是没有行号的，需引入highlightjs-line-numbers.js插件来生成行号