(轉載)用 CSS 產生語法醒目顯示效果

edited 十月 2013 in 其他
出處: http://www.hkpug.net/node/40

語法醒目顯示(syntax highlighting)幾乎是每一個技術網站都必備的功能,比較以下兩個例子便很容易明白沒有這項功能是多麼令人懊惱的事:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
  <title>My Page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <h1>Heading</h1>
  <p>HTML source without syntax highlighting, is it easy to read?</p>
</body>
</html>

[請參閱原文觀看語法醒目顯示的效果,此效果在這個討論區無法複製]

大部分系統實現這項功能的方法都是倚靠特定的函數來加插顏色到原始碼中,例如使用一個 highlight_html($input_str) 把一段 HTML 字串加插顏色效果,這個方法違反了把表達層和運算層分開的軟件設計理念,而且這種為特定系統編寫的函數移植到其他系統也有一定的困難,而且由編程語言直接生成 HTML 原始碼,使維護和修改顏色方案時十分困難。

Dean Edwards 利用「CSS 擴充行為 」替特別標籤的 HTML 段落進行語法增強顯示,現時 IE 和 Mozilla 系列瀏覽器均支援這些「行為」,啟用這種「行為」的步驟是:

1. 編寫一個「行為檔」(.htc), 它基本上是一堆 JavaScript。
2. 在 CSS 中把特定的 HTML 標籤與這個「行為檔」聯繫起來。

為了令寫給 IE 的「行為檔」也能在 Mozilla 上執行,Dean Edwards 寫了一個 XBL wrapper,除此以外,他還提供了一大堆「行為檔」來支援不同的語言,包括 HTML、CSS、PHP、JavaScript、XML 等,只要把有關的段落的 class 適當地標示,便能自動產生語法醒目顯示的效果。以下的例子示範怎樣使用:

1. 從 http://dean.edwards.name/download/star-light.zip 下載最新的 1.0.3 版語法醒目顯示包

2. 把整個包解壓到一個獨立的目錄,例如 style/start-light

3. 在你的 CSS 中加上
@import url("star-light/star-light.css");

4. 在你的 HTML(或由 PHP 生成的 HTML)中,需要進行語法醒目顯示的段落,前後加上 <pre class="xxxxx"> 和 </pre> 標籤,其中的 xxxxx 可以是 htm、html、css、php、xml 等

這樣便大功告成了。

這個方法的優點是它獨立於網頁編程語言,也獨立於伺服器的架構,唯一的要求是瀏覽器支援 CSS 擴充行為這個 W3C 標準。

原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=1698

評論

Sign In or Register to comment.