2014年9月14日 星期日

替 Blogger.com 文章加上程式碼區塊(codeblock)和執行結果區塊(shellblock)

選擇 範本>編輯HTML ,在HTML程式碼中找到CSS區塊,最後新增.post .codeblock和.shellblock的CSS程式碼如下:

<style type='text/css'>    ...

    .post .codeblock { 
       display: block; /* fixes a strange ie margin bug */
       font-family: Courier New;
       font-size: 10pt;
       overflow:auto;
       background: #f7f7f7 url(http://1.bp.blogspot.com/-wzskRQSGOzU/VBWuvugaISI/AAAAAAAAQXU/oAbhhsIOY10/s1600/Code_BG.gif) left top repeat-y;
       border: 1px solid #ccc;
       padding: 10px 10px 10px 21px;
       max-height:1000px; 
       line-height: 1.2em;
    }

    .post .shellblock { 
       display: block; /* fixes a strange ie margin bug */
       font-family: Courier New; 
       font-size: 10pt;
       overflow:auto;
       color: #00ff00;
       background: #000000;
       border: 1px solid #ccc;
       padding: 10px 10px 10px 21px;
       max-height:1000px; 
       line-height: 1.2em;
    }
</style>

另外在<head>和</head>之間,加上
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

記得要「儲存範本」喔!

之後在寫部落格文章時,在HTML模式底下寫
 
<pre class="codeblock prettyprint">
public class first {
    public static void main (String[] args) {
        System.out.println("Hello, my first java!");
    }
}
</pre>
就會出現下列結果囉:
public class first {
    public static void main (String[] args) {
        System.out.println("Hello, my first java!");
    }
}
如果寫成
<pre class="shellblock">
  執行結果
  ...
</pre>
結果就會變成
  執行結果
  ...
#

沒有留言: