Txp 與 dp.SyntaxHighlighter

  • Posted by Beata on 九月 23rd, 2006 filed in Blog

前陣子突然迷上dp.SyntaxHighlighter(Demo)這款語法高亮的js；最主要的原因是它除了能語法高亮之外，也能顯示純文字格式的代碼，還有列印的功能。

原本打算在wp下次升級時加裝 dp.SyntaxHighlighter 的，沒想到中途變節投奔 Textpattern，也只好將 dp.SyntaxHighlighter 順便帶過去。

我想，要在 Textpattern 之下製作任何語法高亮的外掛，最讓人又愛又恨的莫過於 Textile—很好用卻無法以任何tag「完全」關閉的功能，只能在文章屬性裡設定是否使用。
即使是使用了<notextile>標籤，仍然會將內容的部份語法格式化，例如代表列表的「#」代表粗體的「*」等等…這些都是無法完全避免的。

雖然說在Textpattern Resources有現成的語法高亮外掛可以解決此問題，但畢竟我仍然希望以dp.SyntaxHighlighter的形式來呈現我的代碼，不得已只好另行製作一個外掛。

upm_textile這個外掛提供了一個方式，允許當文章的Textile屬性為關閉時，仍然可以藉由 <upm_textile> 標籤來達到啟用 Textile 轉換功能。這對於捨棄不了 Textile 又同時希望 Textile 別那麼雞婆的人而言，不啻是一個不錯的解決途徑。

Textpattern支援在文章內使用html標籤，所以在轉換代碼時注意要使用 htmlspecialchars 來將一些特殊字元轉化為html實體，由於我所使用的文章模式為 斷行模式，所以代碼轉換的過程中，bat_dpCode會先將<br>標籤給去除掉；這代表著，如果想要在代碼中呈現<br>，那麼必須麻煩點.將<br>改為&lt;br&gt;

php · [高亮] · [原始]

  1. function bat_dpCode($atts, $code = "") {
  2.     extract(lAtts(array(
  3.         ‘class’ => ‘html’,
  4.         ‘cols’  => ”,
  5.         ‘rows’  => ”,
  6.         ‘file’  => ”,
  7.         ‘dir’   => ‘dpcode/’
  8.     ), $atts));
  9.    
  10.     if ($file == ”) {
  11.         $code = preg_replace(‘/<br\\s*?\/??>/i’, ”, $code);
  12.         $code = htmlspecialchars($code, ENT_QUOTES, ‘UTF-8′);
  13.     } else {
  14.         # From "krl_geshiSyntaxHighlight":http://textpattern.org/plugins/169/krlgeshisyntaxhighlight
  15.         if (!defined("_BAT_DOCUMENT_ROOT")) {
  16.             define("_BAT_DOCUMENT_ROOT", $_SERVER["DOCUMENT_ROOT"]{count($_SERVER["DOCUMENT_ROOT"])} == "/" ? $_SERVER["DOCUMENT_ROOT"] : $_SERVER["DOCUMENT_ROOT"]."/");
  17.         }
  18.         $code = file_get_contents(_BAT_DOCUMENT_ROOT.$dir.$file);
  19.     }
  20.     $code = trim($code, "\r\n");
  21.     $return_str  = ‘<textarea name="code" class="’.strtolower($class).‘"’.$cols.$rows.‘>’.$code.‘</textarea>’;
  22.    
  23.     return $return_str;
  24. }
function bat_dpCode($atts, $code = "") {
	extract(lAtts(array(
		\'class\'	=> \'html\',
		\'cols\'	=> \'\',
		\'rows\'	=> \'\',
		\'file\'	=> \'\',
		\'dir\'	=> \'dpcode/\'
	), $atts));

	if ($file == \'\') {
		$code = preg_replace(\'/<br\\\\s*?\\/??>/i\', \'\', $code);
		$code = htmlspecialchars($code, ENT_QUOTES, \'UTF-8\');
	} else {
		# From "krl_geshiSyntaxHighlight":http://textpattern.org/plugins/169/krlgeshisyntaxhighlight
		if (!defined("_BAT_DOCUMENT_ROOT")) {
			define("_BAT_DOCUMENT_ROOT", $_SERVER["DOCUMENT_ROOT"]{count($_SERVER["DOCUMENT_ROOT"])} == "/" ? $_SERVER["DOCUMENT_ROOT"] : $_SERVER["DOCUMENT_ROOT"]."/");
		}
		$code = file_get_contents(_BAT_DOCUMENT_ROOT.$dir.$file);
	}
	$code = trim($code, "\\r\\n");
	$return_str  = \'<textarea name="code" class="\'.strtolower($class).\'"\'.$cols.$rows.\'>\'.$code.\'</textarea>\';

	return $return_str;
}

[高亮] · [原始] · php

或許有人會問為什麼不放出外掛檔案？
恩…這段代碼只是我自己的一個小測試…有興趣的人就拿去用吧！
電腦爆炸蓋不負賠償責任，請謹慎服用…
記得在使用之前要先在頁面裡讀入dp.SyntaxHighlighter的js阿！

使用方式是

html · [高亮] · [原始]

  1. <txp:bat_dpCode class="language" cols="cols" rows="rows" file="file_name" dir="file_dir">
  2. …Some code here…
  3. </txp:bat_dpCode>
<txp:bat_dpCode class="language" cols="cols" rows="rows" file="file_name" dir="file_dir">
...Some code here...
</txp:bat_dpCode>

[高亮] · [原始] · html

以上每種屬性都可省略…

class
代碼的語言 (同時也可附加一些功能在class屬性裡)，預設值為 html
關於 class 的屬性設置可以參考dp.SyntaxHighlighter的使用教學

cols
就是textarea的cols屬性，沒有預設值

rows
就是textarea的rows屬性，沒有預設值

file
要高亮的檔案名稱，沒有預設值
如果此項目有設定的話，會將指定檔案的內容高亮

dir
預設值為 dpcode/
file有設定時此選項才會有作用，表示要從哪個資料夾讀取檔案

Update 2006.09.24
My Program 發表了一篇很詳盡的dp.SyntaxHighlighter中文安裝教學—SyntaxHighlighter - 語法高亮標記同時也提供了不少實際使用範例。
不知道js怎麼導入與設定的人不妨前往閱讀。


5 Responses to “Txp 與 dp.SyntaxHighlighter”

  1. My Program Says:
    九月 24th, 2006 at 1:23 上午

    SyntaxHighlighter - 語法高亮標記…

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

  2. avi Says:
    二月 5th, 2007 at 9:26 下午

    請問如果想掛在google的bloger上
    要如何克服斷行以及的格式問題

  3. 炎羽 Says:
    五月 10th, 2007 at 4:08 上午

    請問您的語法高亮為什麼是粉色系
    且有高亮與原始切換功能呢?

    能否分享是哪家所做的功能呢
    目前我是使用dp.SyntaxHighlighter

    煩請解答，萬分感謝~

  4. ?????Textpattern?? - My Habari Says:
    五月 16th, 2008 at 12:58 上午

    [...] dpcode [...]

  5. 卍解 :: 我所使用的Textpattern插件 Says:
    九月 1st, 2008 at 11:07 上午

    [...] chh_related_articles 根据Category, keywords等生成相关文章列表 5. dpcode 高亮插入文章的代码片段6. dru_chatometer 根据留言数量排序生成文章列表7. [...]

Leave a Comment