在網頁中嵌入顯示程式碼:Google Code Prettify

我的部落格終於加入顯示程式碼方法了
這樣在整理上,因該會方便許多,在這裡記錄一下備忘記錄

在<head>以下,插入以下語法
 <!-- Start Google Code Prettify --> 

<script src='//google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/> 

<!-- End Google Code Prettify -->

找到 /* Posts
.post .codeblock { 
display: block; /* fixes a strange ie margin bug */
font-family: Courier New; 
font-size: 10pt; 
overflow:auto; 
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:1000px; 
line-height: 1.2em;}
這時若要保持程式的排版, 建議使用<pre> 這個標籤,如下面這段程式:
<pre class="codeblock prettyprint">
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!");
    }
}
如果程式中有角括號等會影響 html 顯示的字元,
得先用 Html Encode 工具 將程式轉換。
參考資料: 在網頁中嵌入顯示程式碼:Google Code Prettify

留言

這個網誌中的熱門文章

Routeros中TX與RX的定義

Windows 7 輸入法不見

RouterOS 啟用 (NAT)IP地址轉換