[Blog] 在 blog 中張貼程式碼

• 原理:
1. 以 HTML的 pre tag來實作, 如 HTML裡的 <img> 表示圖片、<h1>表示等級1的header等等, pre表示的是 pre-formatted text, 會以定寬字型以及保留空格與換行的方式來處理。
2. 設計特別的 class 來指定這些程式碼, 如 Google 的 prettyprint
3. 設計 CSS 來 highlight畫面
4. 利用 javascript 來做是否為keyword等字的判斷, 來highlight特別的字 (每個語言都有自己的 keywords, 如: class、printf 等等, 這些 keywords因語言不同而不同, 所以應該也要有對不同語言提供不同 keywords highlight的功能)
• 方法:
1. 載入上面提到的 CSS (以blog-替程式碼上色提供的 sample為例)與 Javascript (以 Google Code Prettify 為例)
1. 在 Blogger中, 新增 HTML/Javascript 小工具

<style type='text/css'>
.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;
    overflow: auto;
    background-color: #eee !important;
    color: black;
    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: 'Consolas', '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 {
    color: black;
    background-color: #eee;
    margin-left: 10px;
}
</style>
 
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js">
</script>

2. 在自己的程式碼中輸入程式碼區塊
1. 指定為 pre block, 並指定 class 與特定 config (例如特別的語言: lang-*, support list, 或是顯示行號的 linenum)

   <pre class="prettyprint lang-cpp linenums">code snippet</pre>

2. 需要注意的是, 這邊的 code snippet要經過處理, 也就是有經過 escape符號預處理, 簡單來說, 通常任何程式語言都會有 escape characters, 簡單就是用以告知 compiler/interpreter, 你就是要用該符號, 例如: printf的語法是 printf("what you want to print"), 但你就是要 print 引號 (")的時候怎麼辦咧? 就是加入 escape character (\), 而在 HTML則是輸入 &lt; &gt; 等等, 不過也有網頁服務直接幫你轉換 => HTMLEscape .net
3. 另外, 也有很多類似的相關 js 可以套用, 如 SyntaxHighlighter

• 當然也可直接使用網站服務
• Gist
• Pastebin
• Chop
• Pastie
• Reference
• 在 Blogger 上用 Google Code Prettify 及 GitHub Gist 顯示程式碼 (不修改範本的懶人招數)
• 替程式碼上色
• 網頁使用程式碼高亮的最佳作法及推薦外掛