如何在部落格網誌中，顯示這麼具有高質感的語法框呢?其實這很簡單，這是利用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>之間，就可以顯示語法框了!別忘了要把"<"和">"轉換成<與>後，才能讓語法不會在網頁上執行，不過遇到一長串的語法怎麼辦?請點這裡，讓HTML Encoder自動幫你轉換。
範例:
<code><a target="_blank" href="http://happy-yblog.blogspot.com/2010/02/happy-chinese-new-year-2010-google-logo.html"><img border="0" src="http://www.google.com.tw/logos/lunarnewyear10-hp_ud.gif" width="292" height="123"></a></code> 三、完成圖
這就是語法框在網頁上執行的效果!
我是code高質感語法框
沒有留言 :
張貼留言