魚與熊掌如何兼得～縮短SyntaxHighlighter載入時間

在部落格上，常常會有人分享程式碼。

但是只是直接貼上的話，程式碼的排版不但沒辦法顯示，可讀性上也會非常糟。

所以就有人使用類似SyntaxHighlighter這樣的外掛工具貼出漂漂亮亮的程式碼。

但是SyntaxHighlighter雖然好用，但也是會吃掉你的網頁速度。

那麼該怎麼辦呢？

以下提供解決跟廢話的方法。



SyntaxHighlighter是很常用的高清顯示工具，安裝的方法我就不在這裡多說了，有興趣的自己去Google。

安裝好了之後應該會覺得網頁開啟的速度有點下降，我就是這麼覺得……

我的個性這麼龜毛，當然沒辦法忍受，所以我就開始嘗試怎樣可以讓載入快一點。

其實這個方法也沒什麼大不了的，甚至我認為會一點程式的人就會想到這樣的方法(，或英文，後來才發現官網有寫......)。

所以我認為這一篇成為廢文的機率還滿高的，先為這篇文默哀一下好了。

不管怎樣，我還是來介紹一下怎麼做。



首先，為了看出差別，我們要使用網頁的測速工具。

在下用的網頁測速工具是這一個：Pingdom

將網址輸入進欄位後，按下Test Now，它會顯示出你的網頁速度。
這是我沒裝SyntaxHighlighter時候的速度
安裝SyntaxHighlighter之後的速度

找到你的SyntaxHighlighter程式碼，以我為例，大概會長這樣：

<!-- SyntaxHighlighter  3.0.83-->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<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'/>
<!--程式語言.js檔-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<!--呼叫函式-->
<script type='text/javascript'>
SyntaxHighlighter.all();
</script>

SyntaxHighlighter有提供它們的網頁空間，真是佛心來著。


仔細看，我註解以下的地方都是屬於判別程式語言如何顯示的js檔，也就是說它們其實不是必要的檔案。

所以你可以挑選你要程式語言，這樣而要載入的檔案就會變少，也可以達到加速的目標了。

順帶一提，如果你沒有用到autoload的函式的話，你甚至可以把這行刪掉。

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>

至於js檔對應的程式語言，你可以在官網這裡找到說明

留下你要的語言就好，以我為例，我只留下了

<!-- 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'/>
<!--程式語言.js檔-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<!--呼叫函式-->
<script type='text/javascript'>
SyntaxHighlighter.all();
</script>

不過你以為這樣就結束了嗎？

當然沒有，看了官網之後才發現程式語言的檔案其實是可以動態載入的！

也就是說，你可以不用一開始就把所有的程式碼給載入進來。
而是在判斷要取用哪一個程式語言之後再行載入。

怎麼作呢？ 以我為例，把程式碼改寫成如下的樣子:
在<head>之後加入

<!-- 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>之後加入

<script type='text/javascript'>
  SyntaxHighlighter.autoloader(
  'cpp c                  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js',
  'java                   http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js',
  'js jscript javascript  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js',
  'php                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js',
  'py python              http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js',
  'sql                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js',
  'xml xhtml xslt html    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'
);
SyntaxHighlighter.all();
</script> 

這樣就大功告成了！ 再測一遍讀取的速度吧
這個工具受到某些因素的干擾，而會有些些的誤差，基本上作參考就可以了。

不過我們還是可以看出有稍微加快了一點，真是可喜可賀、可喜可賀。


除了加速載入之外，在SyntaxHighlighter之中也是有些設定是可以更改的。

名稱	預設值	說明
bloggerMode	false	如果你是blogger的用戶的話，建議把這個設成true
strings	Object	你可以改變SyntaxHighlighter中的預設訊息，點擊這裡顯示可更改的訊息內容
stripBrs	false	這個選項可以讓你忽略<br />標籤
tagName	"pre"	可以使用不同的標籤

範例：

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

要說我的測試結果的話，我只有試出bloggerMode跟strings而已(掩面)


接下來是改變SyntaxHighlighter的預設顯示

名稱	預設值	說明
auto-links	true	偵測網址，並決定是否設成超連結。設成false網址就會不能點擊
class-name	''	允許你設計自己的css樣式
collapse	false	設成true的話，你可以將程式碼收納起來，點擊便會展開
first-link	1	設定開始的行數
gutter	true	是否顯示行數
highlight	false	允許你在其它的程式語言中顯示html或xml的程式碼，設成ture必須要有載入shBrushXml.js。
smart-tabs	true	允許你使用smart tabs功能。其實我不知道這是什麼，不過好像是偵測tab的功能吧。
toolbar	true	允許你決定是否顯示工具列

有兩種方式可以控制上述的設計：

1.直接在程式碼中設定

SyntaxHighlighter.defaults['gutter'] = false; 
SyntaxHighlighter.defaults['smart-tabs'] = false; 
... 
SyntaxHighlighter.all();  

2.在標籤中設定

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>

以上寫的設定，在官網中皆有範例。

透過範例應該會比較容易暸解，有興趣的請點選範例。


另外，如果你不喜歡預設的主題樣式，官網也提供了其它的主題可以進行更換。
點擊這裡選擇你喜歡的主題。

並將下面程式碼中的shThemeDefault.css改成你選擇的主題檔案名稱。
示範：

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css" rel="stylesheet" type="text/css"></link>

這樣就可以了。 對於SyntaxHighlighter的說明大概就到這邊為止。
Hope you like it！

後記

興沖沖寫到一半，發現原來已經有人寫過了，頓時洩了氣。

不過既然開了頭，想說還是把它給寫完好了。

不過倒是加了一點原本沒要寫的config說明。

這樣也是另一種的收獲吧。

什麼？你說這也有人寫過？啊啊啊，我不管了啦！