如何在Yahoo奇摩部落格顯示code高質感語法框

本文 由 玩樂部落格大全 發布!文章引用須遵守 引用須知 ，轉貼時請勿刪除本行! 如何在Yahoo奇摩部落格中，顯示這麼具有高質感的語法框呢?其實這很簡單，這是利用CSS做出邊框效果並且加上背景圖片，就可以顯示出這麼好看的語法框，現在只要在CSS增添一段語法，以後發文的時候... 本文由玩樂部落格大全發布!文章引用須遵守引用須知，轉貼時請勿刪除本行!

如何在Yahoo奇摩部落格中，顯示這麼具有高質感的語法框呢?其實這很簡單，這是利用CSS做出邊框效果並且加上背景圖片，就可以顯示出這麼好看的語法框，現在只要在CSS增添一段語法，以後發文的時候，要顯示語法框只要在文中加上code標籤，就可以自動顯示這麼高質感的語法框!只要你的部落格網誌版面允許你修改CSS，可以達成這種效果!像Blogger、無名小站、Yahoo!奇摩部落格等等都可以這樣使用!



喔喔~~你只能引用到這裡喔~~~引用時須知"引用須知"

一、修改CSS

在此之前別忘了備份你的CSS。首先把下面的語法(程式碼)複製起來，然後進到你的Yahoo奇摩部落格管理部落格=>面板設定=>自訂樣式，然後把語法框的語法放在最後或找個好地方，就可以按下"確定"

code, .code { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 8pt; overflow:auto; background: #f0f0f0 url(http://img504.imageshack.us/img504/599/codebg1742178.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:200px; line-height: 1.2em; }

二、運用

以後在Yahoo奇摩部落格發文時，先勾選"觀看HTML 原始碼"，然後把語法放在<code>......</code>之間，就可以顯示語法框了!別忘了要把"<"和">"轉換成&lt;與&gt;後，才能讓語法不會在網頁上執行，不過遇到一長串的語法怎麼辦?請點這裡，讓HTML Encoder自動幫你轉換。

三、完成圖

這就是語法框在Yahoo奇摩部落格上執行的效果!

我是高質感語法框~~