如何在Blogger中顯示code高質感語法框

玩樂家 | 2/18/2010 | Share on Facebook
本文 由 玩樂部落格大全 發布!文章引用須遵守 引用須知 ,轉貼時請勿刪除本行! 如何在部落格網誌中,顯示這麼具有高質感的語法框呢?其實這很簡單,這是利用CSS做出邊框效果並且加上背景圖片,... 本文玩樂部落格大全發布!文章引用須遵守引用須知,轉貼時請勿刪除本行!

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




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


一、修改CSS
在此之前別忘了備份你的範本。首先把下面的語法(程式碼)複製起來,然後進到你的Blogger後台=>版面配置=>修改 HTML,然後把語法框的語法放在<head>跟</head>之間,就可以按下儲存範本

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; }  




二、運用
以後發文時只要把語法放在<code>......</code>之間,就可以顯示語法框了!別忘了要把"<"和">"轉換成&lt;與&gt;後,才能讓語法不會在網頁上執行,不過遇到一長串的語法怎麼辦?請點這裡,讓HTML Encoder自動幫你轉換。


範例:
<code>&lt;a target="_blank" href="http://happy-yblog.blogspot.com/2010/02/happy-chinese-new-year-2010-google-logo.html"&gt;&lt;img border="0" src="http://www.google.com.tw/logos/lunarnewyear10-hp_ud.gif" width="292" height="123"&gt;&lt;/a&gt;</code>  



三、完成圖
這就是語法框在網頁上執行的效果!


我是code高質感語法框



Share on Facebook

歡迎幫我們在玩樂家粉絲團點個讚!獲得最新好文!

玩樂家歡迎你加入我們,Google +1獲得最新好文!
Related Posts Plugin for WordPress, Blogger...