高亮度顯示程式碼：使用 Google Code Prettify

無意中發現 Google 有提供高亮度顯示程式碼的小工具
https://github.com/google/code-prettify

簡單引用方式如下

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

or

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

另外還有提供樣式可選擇
https://cdn.rawgit.com/google/code-prettify/master/styles/index.html

像我本身比較喜歡Desert樣式，語法就這樣下

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>

接著在撰寫程式碼中加入特定tag

<pre class="prettyprint">
<code class="language-html">
..........
</code>
</pre>

備註：code中language-*支援多種程式語言，如下

<!--
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".
-->

若要顯示行號的話加上linenums屬性就行了，不過預設只顯示5的倍數行號

<pre class="prettyprint linenums">

要每行顯示的話加上以下style樣式就行了！

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}
</style>