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

apache下設置不顯示目錄列表 Indexes FollowSymLinks

apache下設置不顯示目錄...

pexelsphoto5 選擇編輯httpd.conf文件 vi conf/httpd.conf 找...

jQuery效果滑動隱藏

jQuery效果滑動隱藏

因為需要所以紀錄下來,主要是要透過點選按鈕將字串隱藏或顯示出來... 雖說可以直接用hide或是sh...

動態留言功能調整

動態留言功能調整

guestmap55 最近改進了朋友動態的發文方式.... 一開始在功能方面加上了googlemap...

Recommended reading

Other stories happened at this address

Taare Zameen Par 心中的小星星

Taare Zameen P...

晚餐時間,看了一部印度電影【Taare Zameen Par】 taarezameenpar 一部很...

屋簷上的秘密

屋簷上的秘密

有時麻雀或斑鳩在上頭嘰嘰喳喳... 有時街上的貓悄悄走過... 更不用說一些綠意盎然的裝飾了.......

街角豆漿店的日常

街角豆漿店的日常

每天,我總會先出門到街角豆漿店吃個早餐,趁著Mandy跟U還在夢鄉~ 一個人,喝著咖啡吃著早餐,浪費...

懷念的防無聊小品遊戲釣魚

懷念的防無聊小品遊戲釣魚

說了我念舊不是沒有原因的...... 剛剛在電腦裡找資料....又翻到了這個~ game 有印象嗎?...

啟動休假模式

啟動休假模式

s 其實打從月日開始,就一直是呈現休假狀態~( ̄∇ ̄) 只是今天下午還是很認份的去客戶那邊做完教育訓...

兒子開始發揮畢卡索的藝術天份,只是...在鞋墊上塗鴉是新的作品?

兒子開始發揮畢卡索的藝術天份...

兒子開始發揮畢卡索的藝術天份,只是...在鞋墊上塗鴉是新的作品?

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