2008年8月18日 星期一

如何在Google Blog中用SyntaxHighlighter

  在網路上已有很多關於該 Tool 的教學,但小弟不才,看了好幾篇才做出來,在此也分享一下我的過程:
  在撰寫網誌時,若是有使用到程式碼,可能多半會遇到將程式碼貼到網誌時,版面是一團混亂,而 SyntaxHighlighter 這個免費的 Java Script 工具。這個是在客戶端的瀏覽器上執行,所以只要瀏覽器有支援,應該都可以正確顯示:
Step1. 先去 SyntaxHighlighter 下載檔案
Step2. 再將裡面相關的javascript檔案和css上傳到自己的網頁空間
(只要 Scripts 資料夾內的程式(*.js 與 *.swf) 及 Styles 資料夾內的 SyntaxHighlighter.css上傳即可)
Step3. 登入您的 Blogger
Step4. 點選[版面配置]\[範本]\[修改 HTML]
Step5. 將以下的範例,複製到</body></html>標籤的前面



<link href="http://你的網頁空間網址/SyntaxHighlighter.css" rel="stylesheet" type="text/css">
<script class="javascript" src="http://你的網頁空間網址/shCore.js"></script>
<script class="javascript" src="http://你的網頁空間網/shBrushCSharp.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushPhp.js"></script>
<script class="javascript" src="http://你的網頁空間網/shBrushJScript.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushJava.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushVb.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushSql.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushXml.js"></script>
<script class="javascript" src="http://你的網頁空間網/shBrushDelphi.js"></script>
<script class="javascript" src="http://你的網頁空間網/shBrushPython.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushRuby.js"></script> <script class="javascript" src="http://你的網頁空間網址/shBrushCss.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushCpp.js"></script>
<script class="javascript">
//<![CDATA[
dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
//]]>
</script>

Step6. 測試是否 SyntaxHighlighter 與 BloggerMode 有正常運作
使用時加上如下的 Code:

<textarea name='code' class='language'>
程式碼
</textarea>
or
<pre name='code' class='language'>
程式碼
</pre>




其中 languages 部分,目前所支援有:


C++、C#、CSS、Delphi、Java、Java Script、PHP、Python、Ruby、Sql、VB、XML/HTML 等等。
請參考以下列表,將指定的語言之 Aliases 置換到 languages 的位置上。

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

ps.建議若在<pre>...</pre>區塊中有"<"和">"時要將"<"轉成"& l t ;",">"轉成"& g t ;",這樣才不會錯(把空格去掉)
資料來源:
http://sharedderrick.blogspot.com/2007/12/blogger-syntaxhighlighter.html
http://yehhou.blogspot.com/2007/06/blogger-dpsyntaxhighlighter.html

沒有留言: