今天在用 jade 加载 markdown 文件时,想实现 markdown 中代码高亮显示;

因为,以前一直用的 Google Code Prettify,貌似不能高亮解析后的 markdown 中代码;

最终,选择了 highlightjs,目前最新版为 8.1 其功能主要有:

  • 支持 86 种语法和49种样式

  • 能够自动检测编程语言

  • 同时多种语言代码高亮

  • 可以用于 Node.js 平台

  • 支持任何标签

  • 兼容任何的 js 框架

对于 highlightjs 的使用也是非常的简单:

<link rel="stylesheet" type="text/css" href="/stylesheets/monokai_sublime.css" />
//- 引入代码高亮的语法样式,这里引用的是类似 sublime 的样式
<script type="text/javascript" src="/javascripts/highlight.min.js"></script>
//- 引入highlight的核心js文件
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
//- 执行hightlight

把上面三段代码引入到我们的项目就大功告成啦;

highlight 会自动去寻找代码中的 <pre><code>...</code></pre> 并高亮其中的代码;

当然,我们也可以指定高亮的语言类型,类似这样设置 <pre><code class="html">...</code></pre>(以 html 类型高亮)

同时,我们也可以禁用高亮 <pre><code class="no-highlight">...</code></pre>

如果,我们的代码不放到 <pre><code>...</code></pre>highlight也支持自定义显示代码块:

<script type="text/javascript">
    hljs.configure({ useBR: true });
    $('div.code').each(function(i, block) {
        hljs.highlightBlock(block);
    });
</script>