分類: 懶得分類

SyntaxHighlighter – 語法高亮標記

在 “懶懶喵日記” 那裡看到一個不錯的 client 工具, dp.SyntaxHighlighter, 因為之前也想在網頁上呈現一些程式碼, 而看起來也希望能達到比較像程式碼的方法呈現, 所以就來試用了一下, 該網站連結:

http://www.dreamprojections.com/syntaxhighlighter/

使用這個 javascript library 的好處是對 server side 沒有負擔(因為都丟到 client side 去做了), 而且對於大部分的應用領域來說都非常足夠了, 功能很多, 支持的語法有:

1. C#
2. CSS
3. C++
4. Delphi
5. Java
6. JavaScript
7. PHP
8. Python
9. Ruby
10. SQL
11. Visual Basic
12. XML / HTML

而且還有指定行, 顯示行(line #), 顯示列(col #), 動態展開, 看原始內容(利用 textarea 新開視窗), 列印等不錯的功能, 但是還是有一些些缺點, 例如無法指定大小(預設是全部程式碼顯示的高度及所在區域的全部寬度, 所以寬度可以自行利用 html 語法再調節, 但高度沒辦法, 有篇類似的方法, 可以參考這篇文章: http://bbs.toseek.info/cgi-bin/topic.cgi?forum=3&topic=36 ), 但真的還是很好用的一組 Syntax Highlighter, 所以推薦給大家囉, 目前也已應用在 sample.diary.tw 網站上, 例如: http://sample.diary.tw/2/chart1.php , 未來應該會多利用這組程式碼來作為顯示程式碼的工具囉!
使用方式很簡單, 下載該組件後, 在要使用的頁面上加入:

css:

<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>

javascript 函數:

<script language="javascript" src="Scripts/shCore.js"></script>
<script language="javascript" src="Scripts/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

其中 css 可自行參考如何放置, 在 javascript 則是要含入 shCore.js 後, 再含入 shBrushXXX.js 其中 XXX 為要使用的程式語法, 如 Xml, Cpp 等. 接下來就是要一行起始指令:
dp.SyntaxHighlighter.HighlightAll(‘code’);
其中的 ‘code’ 為要 highlight 區域 (textarea) 的名稱, 所以要使用就用
<textarea name=code class=c>….</textarea>
其中的 name 就指定為 code 即可, 而 class 則為要 highlight 的程式語法名稱對應的 class 即可, 另外尚有幾個功能用參數如下:

1. Smart tabs
2. First line
3. Expand code
4. Show columns
5. No gutter

可以再參考說明, 例如希望顯示預設先不展開, 可以這樣下:
<textarea name=code class=c:collapse>….</textarea>

呈現結果很不錯哦, 如下:

請大家多多利用!
本篇文章的 sample 可以參考: http://sample.diary.tw/3/cpp.php

延伸閱讀: http://www.cnblogs.com/unruledboy/archive/2005/06/28/HTMLHightLightCS.html

標籤 Highlighter, library, markup, syntax, SyntaxHighlighter

Javascript 懶得分類

再探AJAX – 簡單小範例

利用原來的文章: https://diary.tw/archives/274 撰寫了一個更容易測試的 html 範例, 一則以測試同步及非同步, 另一則了解在IE及FF的 AJAX Callback 的差異.

幾件事情要特別小心:

1. browser cache:
在做 AJAX Callback 時, 若是 server side 程式不強迫 client side browser 不 cache 時, IE 會發生 callback response cache 的行為, 這個會讓 AJAX 取得的回應發生問題, 當然有多重方法可以解決, 在 FF 就沒有這種現象. 比較單純而又通用解決方法就是在 callback url 上動手腳, 和一般解決 cache 的方法相同, 這裡利用了 javascript 的時間戳記來將 url 變成每次都不同. 一般的實作方法有兩個, 一個是用 Date.parse(new Date()) 方法, 但時間比較不精確(每次取回的值最後三位皆為 000, IE, FF皆同), 另一則是 (new Date()).getTime() 似乎比較精確, 這兩個方法都是傳回從 January 1, 1970, 00:00:00, local time 開始的 milliseconds. 當然, server side 加不加上 cache control 的 header 就比較不影響了, 因為每次 browser 就會乖乖地來 request.

閱讀全文

標籤 AJAX, callback, Firefox, IE

懶得分類

新增HEMiDEMi文章加入書籤功能

今天才發現 HEMiDEMi 有個將網頁加入HEMiDEMi書籤的功能, (其實是從這個網頁發現的: http://blog.yam.com/syshen/archives/1410294.html), 於是就著手加自己的文章, 利用 HEMiDEMi來加點人氣, 並方便用戶收藏.

連上HEMiDEMi選右上角的[工具], 再選[小貼紙產生器]後, 即可進行小貼紙的產生, 由於它沒有直接 support TT 的 blog 語法, 所以就選其他囉, 不過奇怪的是其他的 href link 最後是 void((URL))這樣的語法, 想說是不是什麼新東東, 自行先測試發現並不會發生連結的結果, 於是就先手動改一下, 並改為用 onmousedown方式(不用onclick原因如後), 產生放在 TT 上用的 HEMiDEMi 的語法, 如下:

<a href=# target=_blank  onmousedown="desc='';via='';if(document.referrer)via=document.referrer;
if(typeof(_ref)!='undefined')via=_ref;
if(window.getSelection)desc=window.getSelection();
if(document.getSelection)desc=document.getSelection();
if(document.selection)desc=document.selection.createRange().text;
this.href='http://www.hemidemi.com/user_bookmark/new?
title='+encodeURIComponent('[ ##_article_rep_title_## ]')+'&url='+
encodeURIComponent('https://diary.tw[ ##_article_rep_link_## ]')+
'&description=
'+encodeURIComponent(desc)+'&via='+encodeURIComponent(via);
return true;" ><img src="http://www.hemidemi.com/sticker/clipcolor_8015.gif" border="0"></a>

(以上的 onmousedown 的 javascript 皆無斷行, 因排版需要有略做調整, 另外TT為避免衝碼, 也將 [ ] 和 ## 間加上了空白, 另外 onclick 會有 selection focus 消失問題(在 IE 下不會), 而取不到 desc, 因為原來設計的引述功能只要反白就會自動帶出哦, 所以改用onmousedown來取得, 方便在產生 HEMiDEMi 標籤時, 帶出使用者反白的引述, 可參閱文章: http://www.quirksmode.org/js/selected.html)

其實重點在於最後的 http://www.hemidemi.com/user_bookmark/new 後面要帶一些東東, title, url, description, via, 分別是加入書籤的[標題](必填), [網址](必填), [引述](非必填), [referer](未出現在畫面上, 應是要做某種分析用), 上面的 javascript 對於 desc 及 via 兩個變數用了相當多的語法來產生, 尤其是 desc, 因為用 desc 所以code會比較大一些, 相對於client side也有一些code的下載負載.

另外採用 anchor + target=_blank 的語法就可以避開 browser 因 window.open 造成的阻擋.

標籤 Bookmark, HEMiDEMi, 書籤

懶得分類

有趣的rewrite

文章作者作者: tim
文章發佈日期 2006-06-23
在〈有趣的rewrite〉中尚無留言

之前在設定 apache rewrite 感覺很有趣, 可以做很多應用, 加上功能強大, 幾乎可以將網址改的很炫很讚, 後來也玩了一下 ISAPI_Rewrite (網址: http://www.isapirewrite.com/), HELICON提供的 ISAPI_Rewrite 功能也類似, 免費版本 ISAPI_Rewrite Lite 可以使用於該 iis 上全部的網站, 所以若要設定個別的虛擬主機的 rewrite rule 時, 就要花錢買 ISAPI_Rewrite FULL. 當然 apache 的 rewrite module 是完全免費的囉.

閱讀全文