參考網站:[筆記]在文章裡顯示優質的程式碼區
複製了上述「良人的大秘寶」裡的CSS碼,加以修改後貼到自己的Blogger Html中,如下:
CODE {
display: block; /* fixes a strange ie margin bug */
/* font-family: Courier New; */
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(https://sites.google.com/site/shiaush/blogger/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
height:200px; // for IE6
line-height: 1.2em;
}
因為我不需要指定字形,所以將font-family:Courier New給mark掉,字形大小則改為我較接受的大小。
在插入程式碼後,預覽卻還是有狀況,原來要使用上述方式時,還必須把程式碼中的一些特殊標記,做一下修改:有「<」、「>」、「&」三個。
- < 用 &lt; 更換
- > 用 &gt; 更換
- & 用 &amp; 更換
但這樣手動修改,若是程式碼少還無所謂,如果很多,除了麻煩,還怕因為疏忽而導致錯誤,所以,可以利用 HTML Encoder 來進行轉換。等轉換完後,再將轉換完後的程式碼貼到文章中。
程式碼貼完後,請記得要到HTML中,在這段程式碼的前面加上<CODE>,後面加上</CODE>喔!
程式碼貼完後,請記得要到HTML中,在這段程式碼的前面加上<CODE>,後面加上</CODE>喔!
0 意見:
張貼留言