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

IE10 在 fckeditor無正常顯示及無法輸入任何字元

IE10 在 fckedit...

於fckorcodeie.js 檔案中, 在B.open(‘GET’, A, false); 及 B...

CentOS 5.2 使用 YUM 將 PHP 5.1.6 更新到 5.2.6

CentOS 5.2 使用 ...

CentOS 5. 版內建的 PHP 版本為 5..,甚至於 5. 版仍舊是 5.. 版本。 基於系...

瀏覽器升級ie9後FCKEditor無法使用對話框解決方法

瀏覽器升級ie9後FCKEd...

原文網址:http://ecshop.tw/bbs/archiver/tid.html 升級到 IE...

Recommended reading

Other stories happened at this address

千呼萬喚屎出來

千呼萬喚屎出來

首先,請原諒我使用較生活化的詞彙。 說說照顧U這近年的時間的感想,我覺得最大的痛苦莫過於擔心他不進、...

獨自一個人的2個星期,第2晚,手機上傳來兒子的新把戲。

獨自一個人的2個星期,第2晚...

一早醒來,發現床原來是這麼的大,而且我還睡在Mandy的位子上。 想想以往我都是睡在床邊上,現在床變...

querySelectorAll對多個相同ID做統一處理

querySelectorA...

a 範例,想將同一組ID的DIV做統一隱藏的動作 var elms = document.query...

童言童語,也太有禮貌篇...

童言童語,也太有禮貌篇......

U最近喜歡說的單字是「謝謝 」,而且也學會了在單字後面加上對象。 遞個東西給他,會說謝謝(爸爸),會...

一兩黑殼蝦的功力

一兩黑殼蝦的功力

養魚養了快年~從台東養到台北。 當然,我一直都不是專業的養魚養草達人,對於水族裡的生態也一直都採放任...

第一天上學,意外的順利。

第一天上學,意外的順利。

沒有分離焦慮,沒有十八相送。 U第一天上學竟然意外的順利\(^o^)/ 早上帶他去幼稚園,跟他說爸爸...

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