2009年8月9日 星期日

在文章中顯示程式碼,加上顏色和框架

比較常見的有兩種方法,為了搞這個,花了點時間
原先是用SyntaxHighlighter的外掛來顯示程式碼,
因為他的樣式比較好看,
但在Blogger使用,會遇到一些奇怪的問題,
我一直弄不出來,不想再debug了,就用另一個方法了
不過要顯示程式碼仍然是相當繁雜的工作

(一)加上框架
步驟一
先在Blogger中找到版面配置->修改html
在html樣板程式碼內搜尋到/* Variable definitions這一行
將下方的程式碼貼在/* Variable definitions上方
CODE { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 8pt; overflow:auto; background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:200px; line-height: 1.2em; }

步驟二

在文章中將程式碼置於<code class="ref">程式碼</code>區塊中即可


參考文章:
[筆記]在文章裡顯示優質的程式碼區


(二)加上顏色
前面步驟已將框架完成了,若想將程式碼加上顏色,可接著繼續做下列方法
步驟一
在html樣板程式碼內搜尋到;<head;>這一行
將下方的程式碼貼在
;</head;>上方

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/><script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/> 
步驟二
繼續搜尋 <body>,將其直接改成<body onload='prettyPrint()'>
步驟三
在文章中將程式碼置於<code class="prettyprint">程式碼</code>區塊中即可

參考文章:
在 Blogger 中使用 google-code-prettify 顯示程式碼


(三)備註
在撰寫持程式碼時,會有一些特殊符號,需改寫成html能夠接受的代碼
"&"寫成"&amp;"
"<"寫成"&lt;"
">"寫成"&gt;"
" "寫成"&nbsp;"


(四)完成範例
將上述兩個方法合併即可讓程式碼有框架和顏色地顯示,
在文章中將程式碼置於<code class="prettyprint">程式碼</code>區塊中即可
#include <stdio.h>
void main()
{
  int a=10, b=20;
  printf("%d",a+b);
}


2010/08 note
另一個搭配Windows Live Writer來撰寫程式碼的方法,在文章中漂亮地張貼程式碼

0 意見 :

張貼留言