angie said

因為要把學習過程整理成文章波在自己的網誌上，如何秀出原始碼，還要排版排的漂亮，成為我的一大挑戰。

要秀在網頁上的原始碼，常常不止一行，有時甚至是一大段。
有時候要展示的是CSS語法，有時候是MT的模版，有時候是有HTML標籤的文章。

那一大段原始碼，有時存在於需要強調的一個段落之中，還被我夾到一個「有底色＋虛線框」的CSS語法裡頭，像我的這一篇。

這時候，哪個語法排在前面，哪邊可以按ENTER鍵換行，哪種語法需要手動加上
才能整齊的換好行，都成了我的麻煩事。

下面列出幾種我試過的方式。
（因為下面要秀出的也包含大量原始碼，所以波這一篇文章的過程，又讓我再次練習了，下面提到的各種方法）。

一、加<pre></pre>，這只能表示，「照原來的排版方式將文字秀在網頁上」，並不能讓HTML碼不在瀏覽器裡起作用。

二、更換字元(1)，在編輯區把字元更換掉，秀在網頁上的，就會是標準的HTML TAG。

「&lt;」即等於半形的「」
「&quot;」即等於半形的「"」
「&amp;」即等於半形的「&」(用在想要把「&lt;」都秀出來，而不是秀出「<」的時候，就得再把「&」再代換掉)
「&lt;/div&gt;」即等於「<div>」

▼例如（參考http://ccca.nctu.edu.tw/~hlb/trans/practicalcss/）

<div class="float"> <img src="image1.gif" width="100″ height="100″ alt="圖 1″ /> <p>標題 1</p></div><div class="float"> <img src="image2.gif" width="100″ height="100″ alt="圖 2″ /> <p>標題 2</p></div><div class="float"> <img src="image3.gif" width="100″ height="100″ alt="圖 3″ /> <p>標題 3</p></div>

三、更換字元(2)：半形換成全形。
這樣，不知該說是方便還是不方便。
也是種方法啦…只要善用「編輯/取代」。
但是，要小心。如果千萬別不注意按了「全部取代」，把需要它起作用的HTML碼都取代掉。
（這個提醒是說給我自己聽的）（…默…）

四、使用<code></code>

我試了HTML碼跟CSS語法，都沒有用，HTML都直接起了作用。
看來這也不適用。
我看書上的範例，好像是拿來放一些程式語言用的。

五、使用<textarea></textarea>

第二點的例子，那郭藍色實線的方框，就是用這個指令包起來的。
原始碼是：
<textarea cols="60″ name="text" rows="6″ wrap="physical" class="blogbody">XXXXXXXX</textarea>
這個語法會把裡面包的原碼，秀在一個捲軸方塊裡面。
調整COLS及ROWS的數字，即可控制框框的大小。
如果算好大小的話（文字多少、行數、瀏覽器解析度等等變數），還能夠讓捲軸方塊不會出現捲軸。
（那就不叫「捲軸方塊」囉…）（…冷…）
「wrap」是指定欄位的換行方式，可用「off」（不換行），「virtual」（自動換行，但輸出時仍為一行），「physical」（自動換行，但輸出時也會換行）。
若要設定方塊裡面，文字的格式，則可以接著再下「class」，或「style="XXXX"」的語法。

六、使用<plaintext>

這個語法….一頁只能用一次….而且不管用在哪裡，整頁，都會變成HTML的原始碼….

七、聽說還有….

<xmp></xmp>

這個語法的功用叫做：顯示HTML標籤。據說是把要顯示的指令夾在語法中間即可。說實話我沒試過，因為我只到第五個方法就成功了，這個方法是抄書上的。
但是先抄下來，以備不時之需，降筆記才做得完整嘛～

八、貼圖。

幸好HTML語法標籤那麼多，我耐心試一試，排列組合一下，總會有跑出正確結果來的一種可以用。
其實我一直在打算，大不了就用抓圖嘛…

是的，貼圖，這就是我的殺手(金間)(PS這個字我想應該是這樣寫：左邊金，右邊間，無奈，居然秀不出來，變成一個問號…)。