在Blogger內加入程式碼高亮-使用Google Code Prettify
之前剛轉換到Blogger來,介紹過一篇使用SyntaxHighlighter來讓程式碼高亮,但用起來始終不那麼順手,或許是因為還要打太多字的關係,要手動指定class="brush:xxx",實在太麻煩了,而且新版的顯示的方式不是那麼喜歡(還是舊版好)。
所以繼續搜尋,終於找到另外一套google推出的google-code-prettify,可用很簡單的方式讓程式碼高亮,而且可自行調整的地方很多喔!
首先先來看看效果吧~底下所顯示的樣式是我自訂過後的~
HTML:
Javascript:
C#:
很讚吧!!底下就直接拿我的設定出來說明安裝方式啦~
首先一樣到設定裡面的「範本」,按下編輯HTML
接著往下拉,找到</body>標籤,在上方加入:
所以繼續搜尋,終於找到另外一套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&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,讓他變成你喜歡的模樣就好囉~
沒有留言:
張貼留言