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...

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

分享到各社群的方式

分享到各社群的方式

每次在寫網站系統時..客戶總會要求希望他們的網站可以有分享到社群網站的功能... 所以把一些常用的方...

整合Facebook粉絲專頁的即時訊息,Zotabox網站打造免費線上支援平台。

整合Facebook粉絲專頁...

還記得在msn的年代,msn有提供在網站上架構即時通訊功能,方便網站管理者與user直接交談~ 現在...

Recommended reading

Other stories happened at this address

不走下去你永遠都不知道人生會如何精彩

不走下去你永遠都不知道人生會...

s 紙,不畫下去,將不會知道會被甚麼東西所填滿。 路,不走下去,將永遠都不知道人生會如何精彩。 大象...

四個月又2天,翻身

四個月又2天,翻身

瞧她一臉有點小驚訝的表情卻又按耐不住喜悅貌。 四個月又天,自己翻身成功,似乎好像不大相信自己成功了。...

火材盒小汽車之滿滿的父愛~

火材盒小汽車之滿滿的父愛~

s 自有集點活動以來~我從沒過也沒想過會有認真收集點數的一天。 以前都是直接拿了商品然後退回點數。 ...

20170214,我的情人節禮物。

20170214,我的情人節...

,我的情人節禮物。

5U的第一張塗鴉作品,真是精彩啊~

5U的第一張塗鴉作品,真是精...

U的第一張塗鴉作品,看來正朝著畢卡索之路前進^^ 偏愛重口味顏色,不喜歡被框框侷限。 真的是無敵抽象...

惱人的厭奶期

惱人的厭奶期

第天,以前安份努力的喝奶,每次餵他都超有成就感的,不誇張,每每我都期待著他打破奧運紀錄。 到現在每次...

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