Highlight.js 语法高亮

Highlight.js 语法高亮(代码着色)可以使用在博客,论坛及任何网页上。它非常容易使用,因为它的工作原理:识别代码,检测语言,(高亮)着色处理。

它支持54种语言,并有26种风格主题。

相较于缺少行号显示;不确定是否支持源代码查看。不过,加上主题文件,仅95KB。

官方网站:http://softwaremaniacs.org/soft/highlight/en/
手册地址:http://highlightjs.readthedocs.org/en/latest/index.html
在线演示:http://softwaremaniacs.org/media/soft/highlight/test.html

如何使用:
1、引入CSS文件
// 默认的风格

<link rel="stylesheet" title="Default" href="styles/default.css" rel="stylesheet" type="text/css" >

// tomorrow-night-blue 风格

<link rel="stylesheet" title="Tomorrow Night Blue" href="styles/tomorrow-night-blue.css">

2、引入JS

<script src="highlight.pack.js"></script>

3、配置并处理

<script>
hljs.tabReplace = '    ';// TAB键显示 4个空格
hljs.initHighlightingOnLoad(); // 初始化
</script>

4、其它

如果使用了不同的代码块进行标记,你需要手动初始化它们。

例如,使用jQuery初始化会是这样:

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

如果依赖于br标签,而不是换行符,那么你应该这样:

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

自动识别代码语言,你可以这样,但必须使用CODE标签来标记。

<pre><code>...</code></pre>

不使用代码高亮,你可以:

<pre><code>...</code></pre>

export.html,在网站不允许使用脚本时,可以将其转换。
注意引入CSS主题文件。

5、注意
在没有jQuery的情况下,
你直接可以这样使用:

<pre><code>code</code></pre>

也可以指定代码语言,如下:

<pre><code>code</code></pre>

别忘了特殊字符转义。

相关的插件: