2014年10月29日 星期三

程式碼顯示Blog樣式教學

加入Google Code Prettify

1.在後台管理介面->範本->修改HTML,
在HTML中搜尋</head>,並複製以下文字至</head>上方
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>

2.搜尋<body,將 onload='prettyPrint();' 加入body tag中。
如下:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='prettyPrint();'>

3.若要在blog中顯示程式碼,請依照以下範例
<pre class="prettyprint">
       程式碼
</pre>

加入css block

1.在HTML中搜尋 /* Posts,並貼上以下文字
.post .code {
  display: block; /* fixes a strange ie margin bug */
  font-family: Courier New;
  font-size: 10pt;
  overflow:auto;
  background: #f0f0f0 url(http://yourweb_images_home/Code_BG.gif) left top repeat-y;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height:200px;
  line-height: 1.2em;
}


2.若要在blog中使用block,請依照以下範例

<pre class="code">
       程式碼
</pre>

Google Code Prettify & css block 一起使用

<pre class="code prettyprint">
       程式碼
</pre>


以下為三種範例:

prettyprint:
public class HelloWorld {

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

code:
public class HelloWorld {

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

code prettyprint:
public class HelloWorld {

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