如何在無名網誌顯示code高質感語法框

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

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




喔喔~~你只能引用到這裡喔~~~引用時須知"引用須知"
一、修改CSS
在此之前別忘了備份你的CSS。首先把下面的語法(程式碼)複製起來,然後進到你的無名網誌=>樣式管理=>修改 CSS樣式表,然後把語法框的語法放在最後或找個好地方,就可以按下"存檔"

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自動幫你轉換。



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


我是高質感語法框喔~~



Share on Facebook

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

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