2008年12月11日 星期四

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(http://lh4.ggpht.com/_gtsCbNaafP0/SUDvQpyJL8I/AAAAAAAAANg/sPEZhnxhbg8/CodeBlock.png) left top repeat-y;}

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



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

  © Blogger templates Psi by Ourblogtemplates.com 2008

Back to TOP