dp.SyntaxHighlighter: 在網頁顯示美觀的程式碼
 2007/02/16 |  分類: Blog工具箱
 | 點擊數: 4 / 2864
真是由石頭成這裡學到不少網頁處理的小技巧耶。不管是Xuite或樂多,對於原貌
呈現的<xmp>或
<pre>標籤,在處理上總是有不少奇奇怪怪的小問題,因此每次要貼HTML或JavaScript的程式時,總是要多花時間去修改可能會
造成問題的符號,而在石頭成網站上看到了使用.dp.SyntaxHighlighter 的解決方法。以下是簡單的使
用步驟:
- 把 dp.SyntaxHighlighter 下載回來,解壓縮後再將需要用到的檔案上傳到Google
pages,以下是基本的幾個必須的檔案:
- SyntaxHighlighter.css
(在解壓縮目錄的Styles裡)
- shCore.js
(在解壓縮目錄的Scripts裡)
- 要貼上的程式種類用的.js檔;要貼JavaScript則上傳shBrushJScript.js
- 在文章的最後面要加上下列指令(把emisjerry換成自己的網址):
href="http://emisjerry.googlepages.com/SyntaxHighlighter.css">
要貼上的程式碼必須置於裡,此
- name="code"
- class="使用的程式語言名稱",如javascript、java等,詳細程式語言清單請參考 [這裡]。
- 非必要屬性:rows=顯示的列數,cols=顯示的行數
class屬性另外可以控制顯示區的外觀,細節請參考 [這裡]。我試用過的說明如下:
- collapse: 程式碼顯示區最上方顯示 + expand
source,按下才會顯示完整的程式碼
- showcolumns: 顯示行號,即…10….20….30這種尺規
- 不同的控制之間以冒號隔開
##
您可能也會有興趣的類似文章
- Xuite樣式研讀攻略! (1則留言, 2005/06/04)
- [轉貼] 全民擁抱BLOG (0則留言, 2005/05/01)
- 變更文章底端的【黑米共享書籤】推文/貼文按鈕 (2則留言, 2007/06/03)
- [Blog] 加入Furl與del.icio.us的連結 (0則留言, 2005/03/04)
- [創作] 翻譯服務產生器:產生放於Blog側邊欄的翻譯按鈕 (3則留言, 2007/04/28)
- Xuite網址的正規運算式測試 (1則留言, 2007/04/30)
- [轉貼e天下] Blog風潮 企業愛恨交加 (1則留言, 2005/06/30)
- 席捲企業的新勢力!Blog Inc. (2005/07 e天下雜誌) (0則留言, 2005/09/12)
- [創作] 個人網頁全都連:Show Yourself Generator V1.0 (0則留言, 2007/04/21)
- [轉貼] 解讀Blog全球旋風! 《數位時代雙週》採訪.撰文/史倩玲 (1則留言, 2005/06/14)
- 修改自動產生分享書籤的按鈕 (4則留言, 2007/02/11)
- 伊藤穰一:把部落格「Google」化 (2005/07 e天下雜誌) (0則留言, 2005/09/12)
- [Blog] 在文章底部隨機顯示相關文章的功能說明 (6則留言, 2007/04/26)
- [創作] 字型工具產生器:動態變更Blog網頁的字型大小 (4則留言, 2007/04/29)
- 樂多Blog試貼 (1則留言, 2005/02/06)
隨機文章- [Sites] 網頁整篇多國語言翻譯:WorldLingo、BabelFish、同文堂
- [Thunderbird] 常用擴充列表說明;增強電子郵件的收納管理能力 (6)
- 去蕪存菁後的iPad常用軟體 (3)
- 近7成網友有部落格 無名最多人用 (2)
- HemiDemi的群組功能 (1)
- [Tools] Locate工具新版的問題
- [轉貼CNet] 慕尼黑選擇Debian作為Linux移轉版本 (1)
- Google+Facebook:把Facebook訊息嵌在Google+裡的瀏覽器外掛
- 編輯環境變數PATH的人性化工具: Redmond Path
- 用tag2find幫你的文件隨處貼標籤 (2)
歷史熱門文章
- 如何手動輸入Plurk的表情圖示? (353,093 點擊/2008-09-29)
- 簡單放大Plurk輸入區的方法[修訂] (86,929 點擊/2008-09-29)
- 啟用&關閉中華電信ZyXEL P874的無線網路連線功能的步驟[修訂] (84,034 點擊/2011-06-01)
- Plurk CSS樣式自訂修改全攻略 (83,124 點擊/2009-07-04)
- 網路升級光世代50M/3M與設定ZyXEL P874 (53,318 點擊/2011-05-28)
- 輕鬆學會彈指神功-揭露AutoHotkey絕技 (43,179 點擊/2008-04-10)
- iPad新手入門技巧 (40,431 點擊/2011-02-05)
- 分享世博台灣館主題曲『台灣的心跳聲』MV(附歌詞+下載連結+新歌詞) (38,151 點擊/2010-04-27)
- 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (37,957 點擊/2009-02-18)
- 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (35,922 點擊/2009-04-18)
|
熱門文章排行
- 如何手動輸入Plurk的表情圖示? (353,093 views/2008-09-29)
- 簡單放大Plurk輸入區的方法[修訂] (86,929 views/2008-09-29)
- 啟用&關閉中華電信ZyXEL P874的無線網路連線功能的步驟[修訂] (84,034 views/2011-06-01)
- Plurk CSS樣式自訂修改全攻略 (83,124 views/2009-07-04)
- 網路升級光世代50M/3M與設定ZyXEL P874 (53,318 views/2011-05-28)
- 輕鬆學會彈指神功-揭露AutoHotkey絕技 (43,179 views/2008-04-10)
- iPad新手入門技巧 (40,431 views/2011-02-05)
- 分享世博台灣館主題曲『台灣的心跳聲』MV(附歌詞+下載連結+新歌詞) (38,151 views/2010-04-27)
- 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (37,957 views/2009-02-18)
- 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (35,922 views/2009-04-18)
|
請問是不是只要重複編輯xuite的文章,先前寫的程式碼區塊就會亂掉呢?
是的,這應該是Xuite的問題。似乎是它把換行給拿掉造成的。