使用highlight.js轻松实现代码高亮

Posted by baicai on May 3, 2016

highlight.js是一个强大的代码高亮工具,它可以自动解析pre标签,自动识别语言,加载高亮样式,几十种主题可选。</p>

下载地址:</p>

https://highlightjs.org/download/

快速使用:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

插件会自动查找并分析语言,加载样式</p>

<pre><code>...</code></pre>
可以指定语言:<p>

<pre><code class="html">...</code></pre>

可以自定义初始化,比如加载所有pre标签

$(document).ready(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

总之,非常强大和方便的。</p>