Highlight.js是一款轻量级的语法高亮插件, 支持54种语言和26种主题，详情见这里

本站使用就是该插件。

简单使用

1
2
3

<link rel="stylesheet" href="styles/default.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

默认高亮<pre><code></code></pre>块包裹的代码

定制

你也可以有选择的高亮代码块

1
2
3

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

如果你的代码不在pre中，则你可能需要使用<br>换行，传递参数true告诉Highlight用<br>换行

1

$('div.code').each(function(i, e) {hljs.highlightBlock(e, null, true)});

更多api详情请点这里

有时你可能需要替换TAB为你想要的任意字符,便于排版

1
2
3
4
5
6
7
8

<script type="text/javascript">
  //替换TAB为4个空白
  hljs.tabReplace = '    '; 
  //替换为span \t
  hljs.tabReplace = '<span class="indent">\t</span>';
  
  hljs.initHighlightingOnLoad();
</script>

语法识别

Highlight是根据code标签上的class识别语言的

1
2
3
4

<pre><code class="java">...</code></pre>
<pre><code class="python">...</code></pre>
<pre><code class="ruby">...</code></pre>
<pre><code class="erlang">...</code></pre>

有些情况下可能需要禁止高亮

1

<pre><code class="no-highlight">...</code></pre>

node.js

Highlight.js 也能够在node.js中使用

1

npm install highlight.js
1
2
3
4
5
6
7

var hljs = require('highlight.js');

// 设置具体的语言
hljs.highlight(lang, code).value;

// 自动识别语言
hljs.highlightAuto(code).value;

如果你有兴趣深入研究请参见源码