dp.SyntaxHighlighter: 在網頁顯示美觀的程式碼

真是由石頭成這裡學到不少網頁處理的小技巧耶。不管是Xuite或樂多，對於原貌 呈現的＜xmp>或 ＜pre>標籤，在處理上總是有不少奇奇怪怪的小問題，因此每次要貼HTML或JavaScript的程式時，總是要多花時間去修改可能會 造成問題的符號，而在石頭成網站上看到了使用.dp.SyntaxHighlighter 的解決方法。以下是簡單的使 用步驟：

1. 把 dp.SyntaxHighlighter 下載回來，解壓縮後再將需要用到的檔案上傳到Google pages，以下是基本的幾個必須的檔案： * SyntaxHighlighter.css (在解壓縮目錄的Styles裡) * shCore.js (在解壓縮目錄的Scripts裡) * 要貼上的程式種類用的.js檔；要貼JavaScript則上傳shBrushJScript.js

1. 在文章的最後面要加上下列指令(把emisjerry換成自己的網址)：
   <br /> <!-- style sheet should be linked at the top of the page --></p> </p> <p> <link type="text/css" rel="stylesheet"<br /> href="http://emisjerry.googlepages.com/SyntaxHighlighter.css" /><br /> </link><br /> <!-- the following code should be place at the bottom of the<br /> page --><br /> </p></p> <p><p><br /> <script language="javascript"<br /> src="http://emisjerry.googlepages.com/shCore.js"></script> <script language="javascript"<br /> src="http://emisjerry.googlepages.com/shBrushJScript.js"></script> <script> dp.SyntaxHighlighter.HighlightAll('code');<br /> </script>

要貼上的程式碼必須置於<textarea> </textarea>裡，此<textarea>必須設定下列屬性：

• name="code"
• class="使用的程式語言名稱"，如javascript、java等，詳細程式語言清單請參考 [這裡]。
• 非必要屬性：rows=顯示的列數，cols=顯示的行數

class屬性另外可以控制顯示區的外觀，細節請參考 [這裡]。我試用過的說明如下：

• collapse: 程式碼顯示區最上方顯示 + expand source，按下才會顯示完整的程式碼
• showcolumns: 顯示行號，即...10....20....30這種尺規
• 不同的控制之間以冒號隔開
  

##

您可能也會有興趣的類似文章

• Xuite樣式研讀攻略！ (1則留言, 2005/06/04)
• Xuite網址的正規運算式測試 (1則留言, 2007/04/30)
• [Blog] 加入Furl與del.icio.us的連結 (0則留言, 2005/03/04)
• [創作] 個人網頁全都連：Show Yourself Generator V1.0 (0則留言, 2007/04/21)
• [轉貼] 全民擁抱BLOG (0則留言, 2005/05/01)
• [Xuite] 自由欄位設定的問題 (4則留言, 2005/04/16)
• [Blog] 在文章底部隨機顯示相關文章的功能說明 (6則留言, 2007/04/26)
• 本部落格的連線速度問題 (1則留言, 2007/12/31)
• 側邊加入迷你水族箱 (3則留言, 2006/09/17)
• [創作] 翻譯服務產生器：產生放於Blog側邊欄的翻譯按鈕 (3則留言, 2007/04/28)
• [Site] Blog平台新選擇：Xuite (3則留言, 2005/03/14)
• 修改自動產生分享書籤的按鈕 (4則留言, 2007/02/11)
• 氣象局衛星雲圖修正－討厭，怎麼又改了？ (0則留言, 2008/11/03)
• Xuite 浮光掠影的映像介紹 (0則留言, 2005/03/29)
• [轉貼電腦報] HiNet推出Xuite，整合部落格、相簿、信箱及硬碟服務 (1則留言, 2005/03/31)