原先是用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能夠接受的代碼
"&"寫成"&"
"<"寫成"<"
">"寫成">"
" "寫成" "
(四)完成範例
將上述兩個方法合併即可讓程式碼有框架和顏色地顯示,
在文章中將程式碼置於<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 意見 :
張貼留言