Loading...

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

Temperature: 0 °C

ChungChung
author_tools

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

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

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

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

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

首先可先到官網下載SyntaxHighlighter_1.5.1版本Url link

解開壓縮檔後會出現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
  • 臺大醫學院舊館 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

客語檢定

客語檢定

恭喜通過客語基礎檢定,期待你將來可以直接用客語跟我對話。

Google map 語言本地化

Google map 語言本...

網路世界的強大...真的是解決問題的好幫手.....雖說有些答案並不可靠.... 但原則上...只要...

Welcome To Google

Welcome To Goo...

Top第一天,參訪了Google APAC HQ 第一次來到Google,難掩興奮心情,拼命的拍了一...

Recommended reading

Other stories happened at this address

青椒炒肉絲佐高粱

青椒炒肉絲佐高粱

很簡單,卻也很下飯。 家裡買的沙茶也放了一陣子了,這晚就決定來盤沙茶口味的青椒炒肉絲。 其實我也不清...

jQuery resize取得瀏覽器目前視窗寬度

jQuery resize取...

pexelsphotokeyboard 在使用CSS調整RWD顯示時~ 也可以使用javascrip...

將照片加入簽名檔

將照片加入簽名檔

我始終相信,科技來自於人性... 而我的人性則是來自於墮性.... 開發 innstory.com ...

兒子,吃香蕉要剝皮好嗎⊙_⊙

兒子,吃香蕉要剝皮好嗎⊙_⊙...

兒子,吃香蕉要剝皮好嗎⊙⊙

導演的人生筆記 - 蕭菊貞

導演的人生筆記 - 蕭菊貞

img 說說這本書,導演的人生筆記~ 這本書很溫暖,樸實的文字卻有著許多的智慧,我喜歡書中一句,請做...

父子時間,萬聖節小物DIY

父子時間,萬聖節小物DIY

父子時間,萬聖節小物DIY

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