Loading...

使用dp.SyntaxHighlighter 程式碼色彩顯示工具,讓紀錄程式心得更有可看性

Temperature: 0 °C

ChungChung
author_tools
說好了要在innstory裡寫下故事紀錄...

所以是不是有方便紀錄的工具或方式,就變成在開發innstory的最大課題...

為了方便紀錄下程式碼(年紀大了,偶爾還是會有這樣的需求)...昨天將顯示code的部份改用了dp.SyntaxHighlighter的工具,引用後的顯示結果將如下:

使用dp.SyntaxHighlighter 程式碼色彩顯示工具,讓紀錄程式心得更有可看性
這是一個 JavaScript版的程式碼亮顯工具,如上圖顯示,在紀錄程式碼時有較高的閱讀性。

使用非常簡單,而這也是選擇使用他的原因....

首先可先到官網下載SyntaxHighlighter_1.5.1版本連結網址

解開壓縮檔後會出現3個資料夾Scripts、Styles、Uncompressed將其引入
<link type="text/css" rel="stylesheet" href="./Styles/SyntaxHighlighter.css">
<script language="javascript" src="./Scripts/shCore.js"></script>  
<script language="javascript" src=./Scripts/shBrushCSharp.js"></script>//載入所需支援的語言
<script language="javascript" src="./Scripts/shBrushXml.js"></script>  
<script language="javascript">  
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = './Scripts/clipboard.swf';  
dp.SyntaxHighlighter.HighlightAll('code');  
}
</script>

接著只要將code寫入在<pre>或<textarea>裡皆可,方式如下
<pre name="code" class="Language">   
... some code here ...  
</pre>

<textarea name="code" class="Language" cols="30" rows="10">
... some code here ...  
</textarea>

就這樣就可以實現程式碼色彩顯示,目前innstory裡也使用了這個方式,接下來紀錄code的部份應該就能改善閱讀性了.....

話說這工具其實存在也很久了...1.5.1版好像也是在2007年就已經釋出....@@

腳步還真慢啊.....

台北市內湖區江南街71巷75弄 Go

https://innstory.com/story-使用dpSyntaxHighlighter_程式碼色彩顯示工具讓紀錄程式心得更有可看性-538

Prev
 PHP使用GD函數切正方形圖像

Next
濱菊企業有限公司 

Nearby Attractions

台北市內湖區江南街71巷75弄-Nearby Attractions

  • 艋舺助順將軍廟(晉德宮) Go
  • 臺灣民主紀念園區 Go
  • 國立臺灣大學日式宿舍-福州街20 ... Go
  • 北投臺灣銀行舊宿舍 Go
  • 新富市場 Go
  • 北投普濟寺 Go

About the Author

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

#有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

地圖故事

地圖故事

map 一切都從第一張畫布開始... Innstory裡原先已有寫故事的功能,接著我把...

解決手機瀏覽器上點擊輸入框放大問題

解決手機瀏覽器上點擊輸入框放大問題

開發RWD的網站已經是趨勢,主要也是因為手機用戶實在是太多 但在過程中一直有個問題困擾...

Android Studio 2.3 隨機改變背景顏色

Android Studio 2.3 隨機改變背景顏色

class 開始學習APP 其實我照著工具書上的方式總是在宣告變數時會產生問題~ 例如...

Recommended reading

Other stories happened at this address

相思成災~

相思成災~

s 一直都覺得~人是複雜的因子組合。 喜、怒、哀、樂,這些都是與生俱來~ 但...可不...

笑起來,跟Mandy小時候一模一樣。

笑起來,跟Mandy小時候一模一樣。

笑起來,跟Mandy小時候一模一樣。...

獨自一個人的2個星期,第4晚,還好有屏東帶回來的三層肉(蔥爆蕃茄豬肉片)。

獨自一個人的2個星期,第4晚,還好有屏東帶回來的三層肉(蔥爆蕃茄豬肉片)。

s 其實,從昨晚我就已經知道今天晚上要炒個豬肉片來當晚餐。 說實在的,以往單身的日子我...

如何關閉電腦版 LINE 對話視窗中的那棵(櫻花樹)背景特效

如何關閉電腦版 LINE 對話視窗中的那棵(櫻花樹)背景特效

有沒有發現最近的LINE對話視窗的背景多了個櫻花特效? 原本想說手機板上的只是飄櫻花的...

你是否知道我故事中的角色?

你是否知道我故事中的角色?

那天~突然在想....... 有看我故事的人,是否會知道我寫的那些故事裡,裏頭的人事物...

快樂星期五,外賣天~自從當了爸,假日總是令人期待的( ̄∇ ̄)

快樂星期五,外賣天~自從當了爸,假日總是令人期待的( ̄∇ ̄)

快樂星期五,外賣天~自從當了爸,假日總是令人期待的( ̄∇ ̄)...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format