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/AVvXsEgkgzV1MygBv_QLonOH8CfYGAAQVKd1Jz8xloVSmkvMWl7B3n_5Ar_k8g7rRo5Ph0nHs4JvanhIkgKI3GjphFoxJQZPDl7QT2qVigK60MiHJ6Qlnbfl8R6OLuQhexUJ1ImlsFj5dcuKtA/) left top repeat-y;}

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

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