使用dp.SyntaxHighlighter 程式碼色彩顯示工具，讓紀錄程式心得更有可看性
Temperature: 0 °C
說好了要在innstory裡寫下故事紀錄...
所以是不是有方便紀錄的工具或方式，就變成我在開發innstory的最大課題...
為了方便紀錄下程式碼(年紀大了，偶爾還是會有這樣的需求)...昨天將顯示code的部份改用了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
寫程式筆記
