搜尋本站文章

2007-12-25

在 Google Blogger 中使用 SyntaxHighlighter 1.5.1

更新日期: 2010/10/07

在 Google Blogger 中使用 SyntaxHighlighter 3.0.83
http://sharedderrick.blogspot.com/2010/10/google-blogger-syntaxhighlighter-3083.html




更新日期:
2009/05/25

SyntaxHighlighter 作者已經更新到版本為 2.0.320 。

請參考以下的網址:
SyntaxHighlighter - Alex Gorbatchev
http://alexgorbatchev.com/wiki/SyntaxHighlighter
但在 SyntaxHighlighter 2.0 以上的版本,其授權模式採取 Donationware。建議各位若要使用 SyntaxHighlighter 2.0 以上的版本時,記得要給作者實質上的鼓勵。請參考以下的網址:
SyntaxHighlighterDonate

http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate

Donationware
SyntaxHighlighter is donationware. If you are using SyntaxHighlighter 2.0 on your site or including it in your product, please donate.

Retrieved from
http://alexgorbatchev.com/wiki/SyntaxHighlighter




在撰寫網誌時,若是有使用到程式碼,可能多半會遇到將程式碼貼到網誌時,版面是一團混亂,目前筆者是使用 SyntaxHighlighter 這個免費的 Java Script 工具。這個是在客戶端的瀏覽器上執行,所以只要瀏覽器有支援,應該都可以正確顯示:

下載網址
dp.SyntaxHighlighter , Version: 1.5.1

http://code.google.com/p/syntaxhighlighter/

作者的網址:
http://www.dreamprojections.com/syntaxhighlighter

筆者以在 Blogger 中使用 SyntaxHighlighter 來介紹:
步驟1. 先去 SyntaxHighlighter 下載檔案。
步驟2. 到 Google Pages 申請免費的網頁存放空間。


http://pages.google.com/

因為 Google 已經停止 Google Pages。請改用其他方式來存放相關的程式碼,例如,使用 Google Code 等等。

Google Page 提供數項功能:
A. 提供免費的工具,協助您製作網頁、發行網頁。
B. 目前是提供 100 MB 的空間可供使用。
C. 提供多樣的佈景主題、版面等等可以自選。
...
請參考此處說明:
http://pages.google.com/-/about.html#using

步驟3. 將檔案解開來後,在 1.5.1 版本中,解壓縮後,將會有 3 個資料夾;請將以下的檔案,全部上傳到先前申請 Google Pages 的空間上:

A. Scripts 資料夾內的程式(*.js 與 *.swf) 。
B. Styles 資料夾內的 SyntaxHighlighter.css。

步驟4. 登入您的 Blogger。
步驟5. 點選[版面配置]\[範本]\[修改 HTML]。
步驟6. 請以下的範例,複製到 </body> </html> 標籤的前面。

<link href="http://DerrickLaLa.googlepages.com/SyntaxHighlighter.css" type="text/css" rel="stylesheet"></link>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shCore.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushCpp.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushCSharp.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushCss.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushDelphi.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushJava.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushJScript.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushPhp.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushPython.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushRuby.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushSql.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushVb.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf="http://DerrickLaLa.googlepages.com/clipboard.swf";
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>



提醒您:
1. 請將 DerrickLaLa.googlepages.com 置換為您所申請的網頁空間。
2. 若是 Google Page 停止申請,您若不介意的話,或許可以直接引用本站的範例碼來使用,也是可行的方法。

或是您可以連線 SyntaxHighlighter 作者提供的網址:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Hosting

裡面由 1.5.1 版本到目前最新的版本 2.0.320 等都有提供,請自行參考。

但此網站的網路頻寬部分,筆者也不清楚,此外,若您要使用 2.0 以上的版本,其授權模式採取 Donationware。建議各位若要使用 SyntaxHighlighter 2.0 以上的版本時,記得要給作者實質上的鼓勵。請參考以下的網址:SyntaxHighlighter/Donatehttp://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate

步驟7. 在撰寫網誌時,若是需要貼上程式碼時,可以搭配以下的使用方式:





<textarea class="languages" name="code" rows="50" cols="70">
... 需要呈現的程式碼,請放置於此 ...
</textarea>


或是




<pre class="languages" name="code">
... 需要呈現的程式碼,請放置於此 ...
</pre>


其中 languages 部分,目前所支援有:
C++、C#、CSS、Delphi、Java、Java Script、PHP、Python、Ruby、Sql、VB、XML/HTML 等等。
請參考以下列表,將指定的語言之 Aliases 置換到 languages 的位置上。






支援的語言



Here's a list of supported languages and their aliases:

Language Aliases
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



步驟8. 另外,因為 Blogger 會將程式碼的最後面,新增一個換行符號<BR>,所以直接使用 SyntaxHighlighter 可能會有問題,請啟用 BloggerMode 即可解決此問題,範例碼如下:

dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');



請參考:
BloggerMode 的說明
http://code.google.com/p/syntaxhighlighter/wiki/BloggerMode

筆者在步驟6. 的範例碼中,是已經包含啟用 BloggerMode 的程式碼。

步驟9. 請測試是否 SyntaxHighlighter 與 BloggerMode 有正常運作。


補充說明:
某些朋友在使用時,可能發覺在編寫一篇文章時,SyntaxHighlighter 並沒有動作,但 SyntaxHighlighter 是需要等到此文章發行到部落格上後,才能看到的效果。
採用 SyntaxHighlighter 的方式,這是將耗用掉客戶端的系統資源來執行 Java script。
所以如果下載網路速度慢,客戶端系統的硬體效能不佳,這是會有影響的。
可以參考官方的討論:
How to use SyntaxHighlighter.
http://code.google.com/p/syntaxhighlighter/wiki/Usage


考慮使用 klein.stephane 所建議的,增加:window.onload = function () 或是 ashwin.jayaprakash 所設計的函數來改善...等等方式來處理。

今舉一個範例如下:





修改為:





此外,還有以下的事情需要留意:
window.onload 事件會在整個 HTML 頁面 (包含圖片等) 載入完成後,才進行執行。
但若是您先前也有程式使用 window.onload 的話,這將是會把前一個 window.onload 的動作給覆蓋。

13 則留言:

  1. 感謝你的整理分享!
    我剛好發現了你的blog
    也會有我說的JavaScript錯誤,
    我找到了解決的方法,
    歡迎到我的blog看看^^

    回覆刪除
  2. 感謝分享,雖然目前尚未遇到您所提及的情境。

    回覆刪除
  3. 您好,我依您的教學修改blogger,但無論如何就是不會運作,不知道哪裡做錯了。

    您可以撥空幫我看一下嗎?萬分感謝!

    http://victe.blogspot.com

    回覆刪除
  4. 謝謝您,我已經解決問題了.

    回覆刪除
  5. 我的blog 也引用你整理的SyntaxHighlighter. 讚哦!

    回覆刪除
  6. 補充說明:
    採用 SyntaxHighlighter 的方式,這是將耗用掉客戶端的系統資源來執行 Java script。
    所以如果下載網路速度慢、客戶端系統的硬體效能不佳,這是會有影響的。
    可以參考官方的討論:
    How to use SyntaxHighlighter.
    http://code.google.com/p/syntaxhighlighter/wiki/Usage

    考慮使用 klein.stephane 所建議的,增加:window.onload = function () 或是 ashwin.jayaprakash 所設計的函數來改善...等等方式來處理。

    回覆刪除
  7. 房常感謝您的整理發表!
    我已經由舊的< code > ... < /code >改用這種方式了.
    能夠支援各種語言真是太美好了~~

    回覆刪除
  8. 感謝大大的分享!
    我在套用的過程中發現一些問題:
    當我在"修改html"中貼上script後一存檔,會變成如下:
    ...
    dp.SyntaxHighlighter.ClipboardSwf="http://fell0206.quotaless.com/SyntaxHighlighter/clipboard.swf";
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    ...
    不知有什麼方法可以解決!請大大指點一下!
    ps.網頁申請的空間應該不一定要是google pages 吧?

    回覆刪除
  9. 感謝,不錯用,因不能申請page了 直接用你的js,請見諒!

    回覆刪除
  10. SyntaxHighlighter的js引用来自外部,不会造成安全问题么,我使用好像发生了同源策略限制,没有成功过。然后我在本地测试时,js改成本地的,就完全没有问题了。

    环境:firefox 3.0

    js文件引用http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/

    错误原因:dp.SyntaxHighlighter.HighlightAll is not a function

    回覆刪除
  11. 請問如何在SyntaxHighlighter內放入pre的標籤呢..不知道怎麼跳脫pre的 tag

    回覆刪除
  12. Derrick 你好 :
    我使用你張貼的 script 可以使我的scource code 成功的張貼出來. 非常感謝

    而有實驗精成的我想要使用 新版的 2.1.364的版本

    而 src 的位址使用
    官網的
    http://alexgorbatchev.com/pub/sh/2.1.364/styles/...js 來直接當做 script 和 css 的來源

    而 script 的地方,使用別人網站張貼的方式
    SyntaxHighlighter.config.bloggerMode = true;
    23 SyntaxHighlighter.ClipboardSwf = 'http://yoursite/clipboard.swf';
    24 SyntaxHighlighter.all();

    而我source code 的方法使用

    <pre class="brush:js;">
    var test;
    </pre>

    但是一直無法呈現, 請問有哪些地方有錯誤法... 我自己試了好久 >"<

    回覆刪除