為了 blogger 的 code block hightlight 搞了好幾天, 先後試了 SyntaxHighlighter 和 google-code-prettify , 最後決定用後者, 因為 SyntaxHighlighter 的 js 實在太多了, blogger 打開的速度慢的嚇人, 雖然有很多方便的功能(toolbar), 且有不同的 theme 可以選擇, 不過為了效能, 還是算了吧 :( . 下列做一些安裝筆記.
- 先下載 google-code-prettify , 將壓縮檔解開目錄下的 /src 都上傳到你的網頁空間(推薦 hostse.com).
- 修改 blogger teamplate(版面配置 > 修改 HTML), 找到 <head> 於下方加入以下的 code.
- 再找到 <body>, 將它修改成下方的 code.
- 自訂 css 給 <code> tag 用.
- <code> tag 使用方式如下, 以後就有 hightlight 啦, ohya.
<!-- google prettify -->
<link href='http://你的網頁空間網址/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://你的網頁空間網址/prettify.js' type='text/javascript'/>
<!-- load google prettify -->
<body onload='prettyPrint()'>
/* CSS for Code Block and Cmd Block in content */
code {
display: block; /* fixes a strange ie margin bug */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
font: normal normal 100% Verdana, Arial, Sans-serif;
font-size: 10pt;
color:#000000;
overflow:auto;
background: #fbfaf7 url('http://你的網頁空間網址/Code_BG.gif') left top repeat-y;
border: 1px solid #000000;
padding: 10px 5px 10px 20px;
margin: 5px 15px 5px 15px;
max-height:250px;
height: expression(this.offsetHeight>205?205:''); /*fix for IE without max-height*/
line-height: 1.2em;
text-decoration: none;
}
code.cmd {
color:#ffffff;
background: #000000 url('http://你的網頁空間網址/BG_CMD.gif') left top repeat-y;
border: 1px solid #ffffff;
}
<code class="prettyprint">
你的 code.
</code>
<code class="cmd">
你的 command.
</code>
p.s 一些字元還是需要手動轉換的, like < > & " , 就用 Text -> HTML Entities Encoder 吧.
ref: this, this, this, and this.
