blogger如何製作高品質html原始碼

前言：
在blogger的文章中，要呈現程式的原始碼，常會與本章的本文混在一起，版面也會被破壞。這裡有一個方法，可以使原始碼與本文清楚的區分。又能兼顧排版的整齊。

STEP BY STEP:
首先在blogger 的「版面配置」→「修改Htm」→「展開小裝置範本」打勾(不了解請參考本系列其他文章)

找到 css設定的部分，增加以下這一段css代碼：

code {  display: block;
font-family: 'Courier New';
font-size: 9pt;
overflow: auto;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height: 180px;
line-height: 1.2em;
letter-spacing: 0px;
color: #000;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTY2PFRFYApac_-ToSq1Fh9qc09bscg-eSMDFGPZMPqlAbKiZz3XLpcAmTiobAAl3yEyd25BHmseqjWSy1671WtFfUAFF1oo1eqiGfhW83vjz-fL5WU1gOZFL_y28kVztygqu3fc2f2g/) left top repeat-y;}

以後要顯示原始碼時，就這樣作：
<pre><code>....這裡放原始碼....</code></pre>



後記：
在 <code> 及 </code> 的html專用的標準符號要替換。可以用
Dreamweaver 自動幫我們轉換，將代碼貼到 Dreamweaver 的設計檢視上，
然後再切換到程式碼檢視，先用Dreamweaver的取代字串清掉<BR>，否則可能會多跳一行。把已經轉好的原始碼複製下來即可。