在網頁中顯示程式碼 codeblock + Google Code Prettify
在網頁中顯示程式碼，常常是最頭痛的問題，看到很多人有漂亮的程式碼區塊，也弄一個來玩。
使用Code Block，並且利用 Google Code Prettify 將文章中的程式碼語法上色美化。
安裝 Code Block：
在 Blogger 樣板中加入以下CSS ：
建議在 「.post {」附近，比較好管理。
background 中有個圖片的連結，可把圖檔下載後放到自己的網路空間。
max-height 是指這個區塊最高能到多高，如果超過的話就會在右方顯示 scroll bar。
安裝 Google Code Prettify：
在 blogger template 中的 <head> 和 </head> 間插入以下語法 ：
搜尋<body並改為：
之後把想要顯示的程式碼用<pre class="codeblock prettyprint"> </pre>包起來，比如：
這樣就可以已有這樣的效果了。
在撰寫程式的過程中，因為一些特殊符號的關係，可以用HTML Encoder轉換編碼。
後來覺得 Highlight.JS自由度較高，主題比較好搭配，效果也不錯，可以參考
格式化程式碼與上色工具 這篇文章
使用Code Block，並且利用 Google Code Prettify 將文章中的程式碼語法上色美化。
安裝 Code Block：
在 Blogger 樣板中加入以下CSS ：
建議在 「.post {」附近，比較好管理。
.post .codeblock { display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
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:1000px;
line-height: 1.2em; }
background 中有個圖片的連結，可把圖檔下載後放到自己的網路空間。
max-height 是指這個區塊最高能到多高，如果超過的話就會在右方顯示 scroll bar。
安裝 Google Code Prettify：
在 blogger template 中的 <head> 和 </head> 間插入以下語法 ：
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script>
搜尋<body並改為：
<body onload='prettyPrint();'>之後把想要顯示的程式碼用<pre class="codeblock prettyprint"> </pre>包起來，比如：
<pre class="prettyprint">
public class HelloWorld {
public static void main (String[] args) {
System.out.println("Hello, world!");
}
}
</pre>這樣就可以已有這樣的效果了。
public class HelloWorld {
public static void main (String[] args) {
System.out.println("Hello, world!");
}
}
在撰寫程式的過程中，因為一些特殊符號的關係，可以用HTML Encoder轉換編碼。
後來覺得 Highlight.JS自由度較高，主題比較好搭配，效果也不錯，可以參考
格式化程式碼與上色工具 這篇文章
留言
張貼留言