2010年10月14日

加速Blogger的SyntaxHighlighter載入速度

不久前發表過一篇Blogger加掛SyntaxHighlighter的教學,最近發現有些速度上的問題。因為一次用了二十幾個<script ...>,所以在網誌每一頁載入時,這些*.js程式碼也會全部都被讀取一次,造成頻寬和記憶體的消耗。

把一些不常用的程式語言拿掉,可以讓速度快一些,但需要的時候還要去修改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外掛,在"網路"監測的功能中,就可以看到實際的作用情形。

3 則留言:

  1. 為什麼不用他提供的Code 比較簡潔

    http://alexgorbatchev.com/SyntaxHighlighter/manual
    /api/autoloader.html

    回覆刪除
  2. 我原本是直接copy&paste官方的Example code,但那個replace '@'的function會讓blogger吞不下去,應該是大於小於符號造成的,我懶得修改了,乾脆先用notepad replace好再貼上去,反正blogger水管粗不差這一點: )

    回覆刪除
  3. リュイチ オニツカ2011年8月1日 上午1:39:00

    哦 ~ 我改完之後才發現有人寫文章阿,
    不過我也是採用官方的寫法=w=
    http://qqboxy.blogspot.com/2010/05/syntaxhighlighter.html

    回覆刪除

lyhcode by lyhcode
歡迎轉載,請務必註明出處!