咕咕雞的學習點滴: 在Blogger內加入程式碼高亮-使用Google Code Prettify

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

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

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

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

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://google-code-prettify.googlecode.com/svn/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"了

如果你在裡面看到'或是&之類奇怪的文字，不要認為那是我打錯出現亂碼了，是因為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，讓他變成你喜歡的模樣就好囉~

咕咕雞的學習點滴

2015年4月22日星期三

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

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

沒有留言:

張貼留言

2015年4月22日 星期三

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

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

沒有留言:

張貼留言

2015年4月22日星期三