[Blogger] 替程式碼上色

Blogger新開張，先決定程式碼要怎麼貼上來吧
之前在 Xuite blogger 是使用 SyntaxHighlighter，所以這次想試試看別的方法
上網找了一下，發現google有在做 Google Code Prettify


在版面配置→新增小工具→選擇HTML/JavaScript，貼上以下程式碼

<style type='text/css'>
 
/* Main Box */
pre.prettyprint, code.prettyprint {
    display: block;
    overflow: auto;
    min-height: 30px;
    max-height: 600px;
    /* 圓角屬性 */
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
 
/* font */
pre, code {
    font-size: 12px !important;
}
 
li.L0, li.L1, li.L2, li.L3, li.L4,
li.L5, li.L6, li.L7, li.L8, li.L9 {
    list-style-type: decimal !important;
    margin: 0 !important;
    padding-left: 4px !important;
    border-left: 2px solid #4CAF50
}
</style>
 
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

這樣預先工作就準備好了，以後只要在文章中有程式碼的部份
就切到HTML編輯，前後夾上

<pre class="prettyprint linenums:1">
    程式碼在這裡
</pre>

指定語言的方式

// <pre class="prettyprint lang-html">
//   The lang-* class specifies the language file extensions.
//   File extensions supported by default include
//     "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
//     "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
//     "xhtml", "xml", "xsl".
// </pre>
 
// 指定 CPP 語言
<pre class="prettyprint linenums:1 lang-cpp">
include <stdio.h>
int main() {
    print ("Hello World\n");
}
</pre>

目前先這樣，有遇到問題再補上