2014-04-08

在Blogger內加入程式碼高亮-使用Google Code Prettify

之前剛轉換到Blogger來,介紹過一篇使用SyntaxHighlighter來讓程式碼高亮,但用起來始終不那麼順手,或許是因為還要打太多字的關係,要手動指定class="brush:xxx",實在太麻煩了,而且新版的顯示的方式不是那麼喜歡(還是舊版好)。

所以繼續搜尋,終於找到另外一套google推出的google-code-prettify,可用很簡單的方式讓程式碼高亮,而且可自行調整的地方很多喔!

p.s. 因為google code快要關了,這個專案也改到GitHub去,所以如果底下連結找不到的話,在GitHub上也有喔!



首先先來看看效果吧~底下所顯示的樣式是我自訂過後的~

HTML:
<html>
<head>
<style type="text/css">
body {
    font-size: 1em;
}
</style>
</head>
<body>
<div>hi</div>
</body>
</html>

Javascript:
<script type="text/javascript">
alert('Hello World!');
</script>

C#:
using System.Text;

public class Hello(string name) {
    Console.Write(string.Format("Hello {0}", name));
    //這是註解
    //還可以標記特別區塊
}

很讚吧!!底下就直接拿我的設定出來說明安裝方式啦~

首先一樣到設定裡面的「範本」,按下編輯HTML



接著往下拉,找到</body>標籤,在上方加入:
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;lang=basic&amp;lang=css&amp;lang=sql' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js' />
<script type='text/javascript'>
    $(&quot;pre&quot;).each(function(){
        $(this).addClass(&#39;prettyprint&#39;).addClass(&#39;linenums&#39;);
    });
</script>

說明:
第一行script就是載入prettify的autoloader,後面的參數,lang表示要載入額外的handler(google預設支援html系列、c系列),這裡有說明,如果要使用不同的style,也可以看這裡選擇你要的樣式,在後面加上skin=xxx即可。

第二行是載入jquery,因為我們要用底下的js程式碼,幫我們自動在<pre>區塊加上程式碼高亮和行號,這樣就不用每次都還要自己手動輸入class="prettyprint linenums"了

如果你在裡面看到&#39;或是&amp;之類奇怪的文字,不要認為那是我打錯出現亂碼了,是因為Blogger的HTML樣板編輯器裡面,這些都是值中值,所以一些特殊符號必須要經過html encode才行,這樣解析出來解碼後才正常,不然會跟xml本身的屬性搞混。


接著往上拉,在</head>之前加入底下:
<style type='text/css'>
/*程式碼高亮設定*/
/*main box*/
.pre-highborder{
 border: 1px solid #ff0000;
 padding: 3px 3px 3px 0;
}
pre.prettyprint, code.prettyprint {
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 padding: 5px;
 background-color: #eee !important;
 box-shadow: 0 0 5px #999;
 -moz-box-shadow: 0 0 5px #999;
 -webkit-box-shadow: 0 0 5px #999;
}
/*font*/
pre span, code span {
 font-family: &#39;monospace&#39;, &#39;Courier New&#39;, &#39;Microsoft JhengHei&#39;, sans-serif !important;
 font-size: 12px !important;
}
/*each line*/
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
 margin: 0 !important;
 padding: 2px 0 2px 4px !important;
 list-style-type:decimal !important;
 border-left: 1px solid #999;
}
/*even line*/
li.L1, li.L3, li.L5, li.L7, li.L9 {
 background-color: #f6f6f6 !important;
}
/*odd line*/
li.L0, li.L2, li.L4, li.L6, li.L8 {
 background-color: #FFF !important;
}
/*line-number background color*/
ol.linenums {
 background-color: #eee;
 margin-left: 10px;
}
</style>

然後存檔,這樣就完成設定囉!!以後如果要加入程式碼的話,只要在編輯文章裡面,使用編輯HTML方式,如下加入:
<pre>
<!--這裡就可以放你的程式碼了-->
</pre>
這樣就行啦~方便!!

但如果是預設不支援的話,就必須手動加上class才行,像是basic、css、sql..詳細支援請看這裡
用法如下:
<pre class="lang-sql">
select * from [user] where user_name = 'Mary'
</pre>

如果支援列表裡面有支援的話,就可以正確顯示了。

如果不喜歡樣式的話,也可以自己調整上面的CSS,讓他變成你喜歡的模樣就好囉~