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 功能導...

blogmap 寫故事還是得有地圖才好厚! 前幾天,sam同我說有一個客戶有Google map的需...

Android Studio 2.3 陽春型計算機

Android Studio...

andrio55 原本這次的學習課題是,與使用者互動之「按一下」事件處理。 我按照工具書上寫的,完成...

PDO連接Mysql方式

PDO連接Mysql方式

pexelsphoto 最近因為源碼檢測的原因,才驚覺自己以前的系統撰寫的方式早已不再安全。 所以決...

Recommended reading

Other stories happened at this address

櫻花樹下其實一點都不浪漫

櫻花樹下其實一點都不浪漫

a 以前,總覺得不管甚麼東西放在盛開的櫻花樹下,那種浪漫感覺是不可多得的時光。 自從車子停在浪漫的櫻...

網站植入Facebook登入FB.api請求修改

網站植入Facebook登入...

會特別紀錄下來的原因是因為FB.api請求又調整了~ function fblogin() {//開...

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

Android Studio...

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

過了三點一刻,但還是先來杯南洋咖啡吧~

過了三點一刻,但還是先來杯南...

過了三點一刻,但還是先來杯南洋咖啡吧~

毛豆紅蘿蔔馬鈴薯炒肉片佐鄉愁

毛豆紅蘿蔔馬鈴薯炒肉片佐鄉愁...

毛豆加上紅蘿蔔切丁、馬鈴薯切丁炒上豬肉片。 嗯,這是我小時候熟悉的味道。我們家常煮~ 雖說Mandy...

獨自一個人的2個星期,最後幾個小時。

獨自一個人的2個星期,最後幾...

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