SyntaxHighlighter是一款用於web頁面的代碼着色工具，可以用來着色多種語言。今天我們通過實例來學習一下它的用法。舊同桌不是老情人，但與你分享過的青春不比初戀少半分。
SyntaxHighlighter的簡單實例
一、SyntaxHighlighter的代碼流程如下
1、Add base files to your page: shCore.js and shCore.css 2、Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes) 3、Include shCore.css and shThemeDefault.css 4、Create a code snippet with either <pre /> or <script /> method 5、Call SyntaxHighlighter.all() JavaScript method
使用的方式可以參考文檔：http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
jar包的下載地址： https://codeload.github.com/syntaxhighlighter/syntaxhighlighter/zip/3.0.83
二、建立一個index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shCore.css"> <link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shThemeDefault.css"> </head> <body> <pre name="code" class="brush: java"> public class Person { } </pre> <pre name="code" class="brush: js; gutter: false;"> function foo() { var i = 3; } </pre> <pre class="brush: java; collapse: true;"> public void javaMethod() { int i = 3; } </pre> <script type="syntaxhighlighter" class="brush: js"> <![CDATA[ /** * SyntaxHighlighter */ function foo() { if (counter <= 10) return; // it works! } ]]> </script> <script type="text/javascript" src="../third/SyntaxHighlighter/js/XRegExp.js"></script> <script type="text/javascript" src="../third/SyntaxHighlighter/js/shCore.js"></script> <script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushJava.js"></script> <script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushJScript.js"></script> <script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushSql.js"></script> <script type="text/javascript"> SyntaxHighlighter.all() </script> </body> </html>
三、顯示的效果如下所示
具體的一些配置情況，可以參考：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
如果要換一種主題，可以在html中替換到默認的主題。比如使用shThemeRDark。
<link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shCore.css"> <link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shThemeRDark.css">
替換后顯示的效果如下：
至於動態的通過代碼來實現切換主題功能，不知道框架的代碼中有沒有配置。后續再做補充
四、關於其它的一些的問題
SyntaxHighlighter lets you build a single .js file that will include the core, CSS theme and the syntaxes that you wish to use.就是說通過工具的構建，可以將SyntaxHighlighter 一些需要在項目中引入的js, css打包成一個js文件。
鏈接：https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Building
以下是一些默認的配置和設置，可以在代碼中修改。
/** * 1、整體可以修改默認的設置：SyntaxHighlighter.config.attrName，SyntaxHighlighter.highlight.attrName。 * 2、也可以上述所使用的那樣，在html中修改屬性值。<pre name="code" class="brush: js; gutter: false;"> */ defaults : { /** Additional CSS class names to be added to highlighter elements. */ 'class-name' : '', /** First line number. */ 'first-line' : 1, /** * Pads line numbers. Possible values are: * * false - don't pad line numbers. * true - automaticaly pad numbers with minimum required number of leading zeroes. * [int] - length up to which pad line numbers. */ 'pad-line-numbers' : false, /** Lines to highlight. */ 'highlight' : null, /** Title to be displayed above the code block. */ 'title' : null, /** Enables or disables smart tabs. */ 'smart-tabs' : true, /** Gets or sets tab size. */ 'tab-size' : 4, /** Enables or disables gutter. */ 'gutter' : true, /** Enables or disables toolbar. */ 'toolbar' : true, /** Enables quick code copy and paste from double click. */ 'quick-code' : true, /** Forces code view to be collapsed. */ 'collapse' : false, /** Enables or disables automatic links. */ 'auto-links' : true, /** Gets or sets light mode. Equavalent to turning off gutter and toolbar. */ 'light' : false, 'html-script' : false }, config : { space : ' ', /** Enables use of <SCRIPT type="syntaxhighlighter" /> tags. */ useScriptTags : true, /** Blogger mode flag. */ bloggerMode : false, stripBrs : false, /** Name of the tag that SyntaxHighlighter will automatically look for. */ tagName : 'pre', strings : { expandSource : 'expand source', help : '?', alert: 'SyntaxHighlighter\n\n', noBrush : 'Can\'t find brush for: ', brushNotHtmlScript : 'Brush wasn\'t configured for html-script option: ', // this is populated by the build script aboutDialog : '@ABOUT@' } },
友情鏈接