網頁

2014年8月29日 星期五

[Blogger]在網頁用 CSS BLOCK 來顯示程式碼

以前在 blogger 利用其修改範本的功能,針對顯示程式碼的部分,做了一些改進,後來都是顯示的蠻好的,不知道何時開始,改變的設定似乎無效了,造成顯示都會跑掉,只好搜尋有無新的改進方式,來改善這問題。

底下是新找到的方式,紀錄一下,免得忘記了。
1. 利用「新增小工具」的功能,選擇 HTML/JavaScript ,然後插入底下程式碼,就可以避免直接修改 HTML 範本
<style>
.post .mycode {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:800px;
line-height: 1.2em;
}
</style>

其中的 mycode 就是class name,用來搭配pre或div使用。
如下面這段程式
<pre class='mycode'>
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
</pre>

顯示的效果為:
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

NOTE:程式碼中有 < 或 > 會影響到網頁顯示,可透過 HTMLEncode 這網站來進行轉換。

沒有留言:

張貼留言