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>
别忘了特殊字符转义。
相关的插件:
- jquery-syntax http://www.codeotaku.com/projects/jquery-syntax/index.cn
- SyntaxHighlighter http://alexgorbatchev.com/SyntaxHighlighter/