在Blogger使用Google Code Prettify來顯示程式碼

在先前的日誌裡面『如何在Blogger插入程式碼？』

我介紹了SyntaxHighlighter來做為Blogger的程式碼顯示工具

雖然SyntaxHighlighter功能看似蠻齊全的

但據了解，在升級為v3之後竟然喪失了自動換行這項功能....

而且不知為何？在我將Blogger變更為HTTPS協定之後

SyntaxHighlighter在Chrome瀏覽器裡幾乎不會發揮作用.....

經過一番嘗試後我決定放棄

改覓其他的手段

最後....我決定使用Google本家的Google Code Prettify來做為程式碼的顯示工具

Google Code Prettify本身相當輕量化

安裝與設定也相當簡單

預設主題只有5種

可識別的程式碼格式相對較少，約20種

載入速度是在我能接受的範圍

這個項目目前在Github上持續維護中(有嗎？)

以下我簡單介紹一下，並筆記一些設定方式：

安裝方式

在<header>中加入以下代碼：

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

如果需要添加樣式的話則可在最後加上?skin=desert如下：

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>

desert為其中一組預設樣式
樣式表請參考連結。

如何使用？

使用<pre>或<code>標籤來包住程式碼
並且加上必要的class來定義樣式
範例如下：

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

如此一來就算成功了。

設定方式

以下簡單說明一下我的設定值：

<style>
/*本體視窗*/
pre.prettyprint, code.prettyprint {
 overflow:visible;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius:4px;
 padding: 5px;
 background-color: #123 !important;
 border:1px solid #345;
}
/*字體大小*/
pre, code {
 font-family: "monospace", "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "Microsoft YaHei", "メイリオ";
 font-size: 11px !important;
}
/*顯示行號*/
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}
/*自動換行*/
pre, code {
  white-space: pre-wrap;
}
/*行高*/
pre li, code li {
  margin-bottom:0em  !important;
  padding-top:1px  !important;
  padding-bottom:1px  !important;
}
/*行號*/
ol.linenums {
 background-color: #234;
 word-wrap: break-word;
}
/*行列間隔*/
li.L0, li.L2, li.L4, li.L6, li.L8 {
 background-color: #234 !important;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
 background-color: #345 !important;
}
</style>