伊沙熊的學習筆記本

　　在部落格或教學網頁有時需要放置各種程式碼，用編輯器自行上色是費時費力的行為，一種比較方便的方法是將程式碼貼到程式中上色，轉成HTML語法後，再貼到網頁中，如：CodeColorizer，缺點是若要直接修改很不方便；另外一種方式則是現在熱門的SyntaxHightlighter，只要貼上程式碼，由JavaScript程式自動上色，效果如下：

package {

	import flash.display.Sprite;

	public class Application extends Sprite {

		public function Camera3D() {

			// initialize ...

		}

	}

}

　　但是有實際使用過的人可能會知道，在樂多部落格上使用SyntaxHightlighter有很多不相容之處，以下先從使用的方法開始，再陸續提出解決衝突的方法。

事前的準備

1. 到官網下載檔案
2. 上傳到可用檔名直接連結的網路空間
3. 編輯文章，貼上程式碼，開始使用！

　　其實直接連結他人上傳好的檔案也可以，而且接下來使用的是我自行修改的版本，目前開放給需要的人自行取用，事前的準備可以省略了。

程式主要分為三大部份，要注意順序

<link type="text/css" rel="stylesheet" href="http://esabear.googlepages.com/SyntaxHighlighter.css"></link>

<script language="javascript" src="http://esabear.googlepages.com/shCore.js"></script>

<script language="javascript" src="http://esabear.googlepages.com/shBrushActionScript.js"></script>

上面第一部份中的shBrushActionScript.js需視使用情況更改，文末的表一可查詢檔案和語言關聯。

<pre name=codeDemo class=actionscript:nogutter:nocontrols>

/* 以程式碼將此行置換 */

</pre>

<pre>換成<textarea>也可以，但是textarea在樂多使用會有一些問題，建議用pre標籤，name=codeDemo的部份，將"codeDemo"字串改成需要的名字(和第3部份的程式同步修改)，重點在於class=actionscript:nogutter:nocontrols這一個字串，"class="後所接的是參數，以冒號:隔開，一般而言只要指定語言就好，例如class=javascript這樣，表一可查詢各語言的別名。nogutter可將側欄去除，nocontrols則是去掉上方控制列，見更多。

<script language="JavaScript">

dp.SyntaxHighlighter.ClipboardSwf = 'http://esabear.googlepages.com/shClipboard.swf';

dp.SyntaxHighlighter.HighlightAll('codeDemo');

</script>

第三部份的重點在於"codeDemo"要和第2部份的name值一樣。
若是同一頁中要放置多個程式碼時，命名要各自錯開，這時第一部份中的程式碼也不用再加，因為可以共用。

表一：列出可用檔案名稱與語言對照表

檔案名稱	支援語言	別名
shBrushActionScript.js	ActionScript	as,actionscript
shBrushCpp.js	C++	cpp,c,c++
shBrushCSharp.js	C#	c#,c-sharp,csharp
shBrushCss.js	CSS	css
shBrushDelphi.js	Delphi	delphi,pascal
shBrushJava.js	Java	java
shBrushJScript.js	JavaScript	js,jscript,javascript
shBrushPhp.js	PHP	php
shBrushPython.js	Python	py,python
shBrushRuby.js	Ruby	rb,ruby,rails,ror
shBrushSql.js	Sql	sql
shBrushVb.js	VB	vb,vb.net
shBrushXml.js	XML/HTML	xml,html,xhtml,xslt

以下是在樂多部落格使用時，要特別注意的事項：

1. 不要使用HTML編輯器，編輯器會自作主張把name屬性和CSS連結去除，重新編輯時textarea還會跑掉。設定裡的【Blog基本管理】-【使用HTML編輯器】需選擇不使用。
2. 樂多會把用<enter>換行的部份在顯示時自行加上<br />，所以javascript中的程式一定要連成一行，還有不想有多餘換行的HTML部份也是，或者把部落格管理設定裡的【自動換行】取消。
3. (未解決)控制行和程式碼顯示時沒有完美接合，應該是出在這裡的CSS設定。

另外這個修改過的版本，總共改了以下的項目：

1. 移除按下複製和列印按鈕後的跳出小視窗。
2. 修正樂多自動添加換行標籤的影響。
3. 增加ActionScript語言的支援。