2006-11-04

程式碼的標記區塊

這邊有很多技術文件會扯到程式碼,或是在提示符號要下的命令,一直苦無好的區塊表示法來顯示,剛好拜讀國良先生的 Blog 時看到超有質感的表現方式,熱心的國良先生也不吝指導,所以就被我偷學會了~

原理很簡單,不過我總是記不得 CSS 的語法和使用方式。只要在 CSS 定義一個自用的標籤像是 <code></code>,把這個標籤的樣式外觀都記錄在樣版的 CSS 裡,以後寫文章的時候直接套用該標籤就搞定了。我還修改補充了一下,除了「程式碼」外,我還會用到「命令」,所以我就多做了一個屬性叫 .cmd 的(好習慣,都用小寫),調整一下變成下面兩段 CSS,把它加入 Template 的 CSS 定義那邊:

code {
  display: block;
  font-family: 'Courier New';
  font-size: 9pt;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height: 1200px;
  line-height: 1.2em;
  letter-spacing: 0px;
  color: #000;
  background: #ccc url(http://abinlee.link.googlepages.com/BG_CODE.gif) left top repeat-y;
}

code.cmd {
  font-size: 10pt;
  color: #ccc;
  background: #000 url(http://abinlee.link.googlepages.com/BG_CMD.gif) left top repeat-y;
}

假設以後有一段程式碼或命令要表示,就把 HTML 的原始碼寫成像是:

<code>這是原始碼</code>
<code class='cmd'>這是命令</code>

就可以顯示成下面這樣啦!

這是原始碼

這是命令

區塊裡用到的兩張背景圖我也是放在 Googlepages 裡面,以便樣版能夠外連。雖然 Blogger 也可以用貼圖的方式來放圖,但是會討厭地縮圖和改檔名,又不能管理,所以只好用外連的囉!另外要提的,一開始本來我是想另外訂一個標籤 <cmd> 給「命令」專用,內容幾乎完全和 <code> 一樣,但不知為何 Firefox 顯示正常,IE 就跑不出來?我可是 follow 標準的 CSS 語法寫的耶!難怪有人說 IE 這個瀏覽器對標準語法的支援反倒有問題,這次倒是第一次見識到了!(害我 debug 了好久,氣!)

參考國良先生的原文指導:
[筆記]在文章裡顯示優質的程式碼區

[注意]:
程式碼或命令行在網頁區塊裡顯示還有一個問題,就是換行。一種解法,如果把改字型(Arial)或是大小可以在一行內多顯示一些字元,可以「儘量」不要換行,不過還是很難避免過長的程式,而且會造成閱讀困難。我的處理方法還是讓它換行,因為這樣還算能閱讀,而且要直接複製貼上也沒有影響,但這樣會遇到 FireFox 裡超長的英文字段(像是網址)不會換行(但 IE 會),目前無解,只能從內容上儘量避免囉!(中間塞空白,或是帶入中文說明,這樣就會被自動斷行了)

回應: 19

小帽 提到...

我用IE看你這一篇看得到,但是我的就看不到了。
不過FF是都沒有問題,真是奇怪??

Abin 提到...

如果部分內文用文章收合的技巧動態藏起來 (Javascript + style display: none)
用 IE 為核心的瀏覽器都有背景圖片 Load 不出來的狀況
這是 IE 對標準 CSS 語法支援不夠的一個狀況,用 FireFox 就會正常
所以如果要避免,就是這類文章不要被動態收合起來,或是"繼續閱讀"改連到該文章的靜態連結囉!

忘幽谷 提到...

我的測試失敗,顯示出來的語法變成另外一種格式~.~

moeradiationlab 提到...

http://moeradiationlab.blogspot.com/
我不知道是不是我的模版的問題

若只是簡單在裡面打<code></code>字是OK的。但只要出現含有<XXX></XXX>之類的語法就會顯示不出來(<>皆為半形)。

Abin 提到...

To moeradiationlab:
不是你模板的問題,是你用 IE 瀏覽器的問題。我在文章末有提到:「本來我是想另外訂一個標籤 cmd 給命令專用,但不知為何 Firefox 顯示正常,IE 就跑不出來?我可是 follow 標準的 CSS 語法寫的耶!難怪有人說 IE 這個瀏覽器對標準語法的支援反倒有問題,這次倒是第一次見識到了!」
我想你也是 Debug 了半天找不出原因吧!

moeradiationlab 提到...

大囧了!只是我從編輯開始到最後都是用火狐的呀......

我的狀況是欄位有跑出來但裡面是空的。而且我還沒厲害到可以DeBug CSS語法的程度。

Abin 提到...

To moeradiationlab:
那我就不懂你這段話是什麼意思了:「若只是簡單在裡面打<code></code>字是OK的。但只要出現含有<XXX></XXX>之類的語法就會顯示不出來」。
我看你的首頁「欄位有跑出來但裡面是空的」,你的原始碼:<CODE><script></script></CODE>,裡面沒資料當然是空的啊,請你在裡面多塞幾行「資料」,才會正常。

moeradiationlab 提到...

抱歉可能沒敘述好,,比如說我打
<code><script>TEST1</script>TEST2</CODE>
最後顯示在欄位裡的只有TEST2前面那部分完全消失,但只要不是<XXX></XXX>這種個格式的話(比如上面的code)是可以正常顯示的。

Abin 提到...

To moeradiationlab:
你實驗舉的這個例子很不好。這段程式碼「<script>TEST1</script>TEST2」不管有沒有被<code>包住,都不會顯示<script>裡面的東西,只會有 TEST2,不是前面那部分完全消失,是本來就不會顯示出來。
「但只要不是<XXX></XXX>這種個格式的話是可以正常顯示的」這句話更是有問題,我剛剛試了一下標準的 HTML 語法:<p>Test3</p><ul><li>TEST4</li></ul>,這一段包在你的<code>裡不管是分段還條列顯示一切正常,所謂的 XXX 你不會只有試 script 吧?

moeradiationlab 提到...

其實我有試過<script></script>以外的東西,但仍然是失敗的(包過你上面給的東西)。但後來發現用FIREFOX看到的結果和IE看到的不一樣:

兩個看到的都是沒被<CODE>包起來的時候所應該顯示的樣子,差別在於IE顯示的狀態下這些東西仍在CODE欄內,FIREFOX則掉到CODE欄之外去了。

Abin 提到...

To moeradiationlab:
我必須和你道歉,是我測試得不夠嚴謹。我原有的定義方式,算是一個獨立的標籤宣告,這種標籤不會覆蓋原有 HTML 的樣式定義,因此,只要碰到特定有段落型的樣式標籤,Code 就會失效,這不是你模板的問題,原有 HTML 定義就是這樣。
我自己一直沒發現,是因為在 Code 標籤內我只放原始碼文字,而且斷行都只用<br>,從來沒混用過其他 HTML 標籤。
我幫你想了其他的解決方案,如果你真的要混用其他 HTML 標籤於 Code 段落裡,那不能用我的方式,要用 Span 段落樣式標籤來達成。我舉個例子,你 Code 的 style 定義要改成 span.code {}, span.cmd{},然後要用的時候改成 <span class="code">,這樣才能解決段落或其他標籤混用的問題。

moeradiationlab 提到...

您的意思是說把上面的code{}改成span.code嗎?然授使用語法得時候用<span.code></span>這樣?

只是這樣用過之後好像並沒有什麼改變。比如說我把您下面這篇文章所提供的程式碼
http://abintech.azhai.org/2007/02/sidebar-element-toggling.html
貼到<span.code></span>中,結果出來的是一個空的欄位裡面什麼都沒有。

Abin 提到...

To moeradiationlab:
我是說獨立的標籤宣告不會覆蓋原有 HTML 的樣式定義,把上面的code{}改成span.code,要用的時候<span class="code"></span>,這樣才能解決段落或其他標籤混用的問題。
不過既然是「code」,我不知道為什麼你在程式碼裡會有「段落」或用其他標籤 (script) 的情況,要換行用 br 不就好了嗎?

Kay 提到...

不好意思...我又來打擾你了..

我打文章時也是使用
<span class="code">
</span>
但他還是沒有跑出那個框框呢...

能麻煩大大再為我解答嗎??

Abin 提到...

To Kay:
用 span 來定義也可以,但是,你文章裡怎麼會用 < > 這種標籤?要也是用 < > 吧?可以請你先搞清楚 HTML 標籤怎麼使用嗎?

提到...

謝謝大大的分享,借轉載

白花花 提到...

14樓的大概是不知道要把尖括弧用&lt;取代,才暫時改成全形的<>吧
只能說<span class="code"></span>不等於<code></code>
所以code{}的css當然就沒作用,改成.code{},裡頭語法不變的話應該就可以了..

jijiong 提到...

to..白花花..請問你的blogger現在是不是限定某些人才能進去觀看呢? 之前滿喜歡看你的日文資料的,但現好像進不去。(abin大,不好意思,借這個留言版聯絡,再說一下sorry)

HSMT 提到...

對不起..我不懂

請問要放哪裡?

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!