原則上，會有許多許多的程式碼出現，為了方便表示，我使用 google-code-prettify 的風格來表示。 有時這並不是很好，不過草創時便先將就將就。 像是 .vimrc 的 syntax 便不是很好，之後在改吧。 以下的步驟，1, 2, 4 是在範本的 html 碼中修改，而 3. 則是在 blog 的內文。
html 碼如下：
1. 在<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> </body> 中加入 onload = 'prettyPrint()'
<body expr:class='"loading" + data:blog.mobileClass' onload='prettyPrint();'>
3.將 code 填於 <pre class="prettyprint"> </pre> 中
<pre class="prettyprint"> context </pre>
4. CSS code
到上一步便可將 code 塗色，但為了將字型也區分，可以在 .post 下加入(搜尋 /* 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;
}
然後將內文填於
<pre class="code prettyprint"> context </pre>
沒有留言:
張貼留言
歡迎發表意見