把一些不常用的程式語言拿掉,可以讓速度快一些,但需要的時候還要去修改HTML樣板,感覺很麻煩。
我仔細研究SyntaxHighlighter的autoloader,才發現這功能可以做到「需要用到某個程式語言的著色時,才載入對應的*.js程式碼」,這樣一來不但可以使用SyntaxHighlighter支援的所有程式語言,而且只有在需要用到的時候才實際載入。
修改方式如下:
先找到<b:skin>標籤,在此標籤前加入以下代碼。
<!-- SyntaxHighlighter 3.0.83--> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
再找到</body>標籤,在標籤前加入以下代碼。
<!-- SyntaxHighlighter 3.0.83--> <script type='text/javascript'> SyntaxHighlighter.autoloader( 'applescript http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js', 'actionscript3 as3 http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js', 'bash shell http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js', 'coldfusion cf http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js', 'cpp c http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js', 'c# c-sharp csharp http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js', 'css http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js', 'delphi pascal http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js', 'diff patch pas http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js', 'erl erlang http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js', 'groovy http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js', 'java http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js', 'jfx javafx http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js', 'js jscript javascript http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js', 'perl pl http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js', 'php http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js', 'text plain http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js', 'py python http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js', 'ruby rails ror rb http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js', 'sass scss http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSass.js', 'scala http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js', 'sql http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js', 'vb vbnet http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js', 'xml xhtml xslt html http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' ); SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all() </script>
測試:
<pre class="brush: groovy"> println 'Hello World' println 1 + 2 + 3 </pre>
用Firefox的Firebug外掛,在"網路"監測的功能中,就可以看到實際的作用情形。
為什麼不用他提供的Code 比較簡潔
回覆刪除http://alexgorbatchev.com/SyntaxHighlighter/manual
/api/autoloader.html
我原本是直接copy&paste官方的Example code,但那個replace '@'的function會讓blogger吞不下去,應該是大於小於符號造成的,我懶得修改了,乾脆先用notepad replace好再貼上去,反正blogger水管粗不差這一點: )
回覆刪除哦 ~ 我改完之後才發現有人寫文章阿,
回覆刪除不過我也是採用官方的寫法=w=
http://qqboxy.blogspot.com/2010/05/syntaxhighlighter.html