為了讓自己也記得怎麼做，特地記錄下來。
1. 在範本中的 <head> 插入這段：
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link>
<script language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>
<script language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js" type="text/javascript"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function() {
prettyPrint();
});
</script>
2. 修改 CSS：
pre.code {
display: block; /* fixes a strange ie margin bug */
font-family: Consolas, Verdana;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
border: 3px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:400px;
line-height: 1em;
}
最後在要顯示的程式碼用 <pre class="code prettyprint"> 和 </pre> 夾起來就行了
不過由於HTML的關係，要在純文字(撰寫)模式下貼上，再切到 HTML 模式下修改即可。
其它參考：
[1] 利用「新增小工具」功能，不必修改範本即可改變部落格的 CSS 樣式的方法
[2] 在網頁中嵌入顯示程式碼：Google Code Prettify
沒有留言:
張貼留言