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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5yQoXazjZmzOBl-CuDBezK44UwWVLs8GNNigHQmyKSv8EvcXCEtSlMQAPUeXgo0wlKey6nO9VbGG4VF-b4NxEJivH5avNfjYagrnLNQcx8l4TL9AbxT6JU3PUUKBgNzbG9WHP8WMGRmcX/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>
結果就會變成 
  執行結果
  ...
#
標籤： , , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)