所以繼續搜尋，終於找到另外一套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&lang=basic&lang=css&lang=sql' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js' />
<script type='text/javascript'>
$("pre").each(function(){
$(this).addClass('prettyprint').addClass('linenums');
});
</script>
說明：
第一行script就是載入prettify的autoloader，後面的參數，lang表示要載入額外的handler(google預設支援html系列、c系列)，這裡有說明，如果要使用不同的style，也可以看這裡選擇你要的樣式，在後面加上skin=xxx即可。
第一行script就是載入prettify的autoloader，後面的參數，lang表示要載入額外的handler(google預設支援html系列、c系列)，這裡有說明，如果要使用不同的style，也可以看這裡選擇你要的樣式，在後面加上skin=xxx即可。
第二行是載入jquery，因為我們要用底下的js程式碼，幫我們自動在<pre>區塊加上程式碼高亮和行號，這樣就不用每次都還要自己手動輸入class="prettyprint linenums"了
如果你在裡面看到'或是&之類奇怪的文字，不要認為那是我打錯出現亂碼了，是因為Blogger的HTML樣板編輯器裡面，這些都是值中值，所以一些特殊符號必須要經過html encode才行，這樣解析出來解碼後才正常，不然會跟xml本身的屬性搞混。
接著往上拉，在</head>之前加入底下：
然後存檔，這樣就完成設定囉!!以後如果要加入程式碼的話，只要在編輯文章裡面，使用編輯HTML方式，如下加入：
但如果是預設不支援的話，就必須手動加上class才行，像是basic、css、sql..詳細支援請看這裡。
用法如下：
如果支援列表裡面有支援的話，就可以正確顯示了。
如果不喜歡樣式的話，也可以自己調整上面的CSS，讓他變成你喜歡的模樣就好囉~
如果你在裡面看到'或是&之類奇怪的文字，不要認為那是我打錯出現亂碼了，是因為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: 'monospace', 'Courier New', 'Microsoft JhengHei', 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，讓他變成你喜歡的模樣就好囉~
沒有留言:
張貼留言