先去 http://alexgorbatchev.com/SyntaxHighlighter/download/ 下載syntaxhighlighter最新版本3.0.83這個插件。
- 在頁面引入核心js和css，這裏我要對js代碼高亮，所以引用了JScript.js這個文件。
<link rel="stylesheet" type="text/css"href="css/SyntaxHighlighter.css"/>
<script type="text/javascript"src="js/shCore.js"></script>
<script type="text/javascript"src="js/shBrushJScript.js"></script>- 把代碼寫到一個<pre>或者<textarea>標籤裏，如圖。
需要注意是這裏的name和class屬性，name是需要通過插件獲取才能應用高亮樣式，class設置語言的類別及樣式選擇。
<pre name="code"class="js">
function a(){
alert("a");
}
</pre>- 在頁面底部加上
<scripttype="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');//這裏的‘code’ 爲上面放置代碼的容器
</script>另外附上語言的別名。
| C++ | cpp, c, c++ |
| C# | c#, c-sharp, csharp |
| css | css |
| Delphi | delphi, pascal |
| Java | java |
| Java Script | js, jscript, javascript |
| PHP | php |
| Python | py, python |
| Ruby | rb, ruby, rails, ror |
| Sql | sql |
| VB | vb, vb.net |
| XML/HTML | xml, html, xhtml, xslt |
class允許配置的選項。
| nogutter | 將不會顯示行號 |
| nocontrols | 將不會在頂部顯示控制器 |
| collapse | 將默認摺疊代碼 |
| firstline[value] | 行計數開始值。默認值是 1 |
| showcolumns | 將在第一行顯示行列 |
這些選項和別名放置在一起，使用冒號 : 字符分隔。
<pre name="code"class="html:nocontrols:firstline[10]">
<html>
<body></body>
</html>
</pre>