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

Android Studio 2.3 陽春型計算機進階版

Android Studio...

andrio5 將之前的陽春型計算機用了不怎麼聰明的方式改善了幾個地方。 首先,我將數字的宣告由in...

PHP 如何檢測陣列是否有重複值

PHP 如何檢測陣列是否有重...

pexelsphoto55 PHP陣列,是在coding時常用到的儲存資料的方式。 但,若陣列中的資...

PHP數字轉國字...

PHP數字轉國字...

什麼鬼...客戶系統的需求竟然有一個數字要轉成國字.... 數字轉國字...數字轉國字...就是要把...

Recommended reading

Other stories happened at this address

住家後頭的小公園,這隻有讓我想起魔女宅急便裡的GIGI~

住家後頭的小公園,這隻有讓我...

住家後頭的小公園,這隻有讓我想起魔女宅急便裡的GIGI~

下一站,父親。

下一站,父親。

i 我無法掩飾我內心的喜悅... 為了等待你的到來,我跟你媽媽也歷經了數個年頭的等待、期待... 因...

一沒注意就受傷了,眉頭紅紅的(猜得到5U做了什麼好事嗎?)

一沒注意就受傷了,眉頭紅紅的...

一沒注意就受傷了,眉頭紅紅的(猜得到U做了什麼好事嗎?)

消失的雞蛋...

消失的雞蛋...

為了煮飯給U,印象中我拿了一顆雞蛋~ 可我現在遍尋不到這顆雞蛋到底身在何處? 該不會哪天突然家裡多了...

挺進7個月囉~

挺進7個月囉~

個月了~最近開始偶爾會腳抽筋,所以鈣的部份得多補充了.... 而且小傢伙在Mandy肚子裡好像工程越...

今年夏天,熱到要死!!

今年夏天,熱到要死!!

真心覺得台灣一年比一年還熱!! 我想我幼年時期南部冬天還可以穿上厚外套的時光應該不會再回來了~ 搞的...

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