Code Prettify 取代 SyntaxHighlighter

很久之前SyntaxHighlighter常會發生程式碼無法上色的問題，最近這一陣子因為發現部落格常常載入過久，這才發現原來好用的SyntaxHighlighter似乎掛掉一陣子了，目前找了Code Prettify來替代掉SyntaxHighlighter

首先一樣到後台的head裡將SyntaxHighlighter相關外掛移除，並加上jsdelivr提供的Code Prettify套件

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<style>
  li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
   list-style-type: decimal !important
  }
  .prettyprint {
    overflow: auto
  }
</style>

另外這邊也有提供一些skin可供替換，請參考以下連結，使用方式為在run_prettify.js後面加上「?skin=套件名稱」，比如MH目前比較中意sons-of-obsidian，則改為「run_prettify.js?skin=sons-of-obsidian」
https://raw.githack.com/google/code-prettify/master/styles/index.html

使用方式則為
<pre class="prettyprint">你的程式碼貼這邊</pre>

範例如下

#include <stdio.h>

int main(void) {

    printf("Hello World!\n");
    return 0;

}

但當程式碼很長時，會不太容易指出哪段，所以通常會標上行號，使用方式是在pre class裡加上「linenums」，例如「pre class="prettyprint linenums"」，而且值得一題的是複製程式碼的時候不會複製到行號

範例如下

#include <stdio.h>

int main(void) {

    printf("Hello World!\n");
    return 0;

}

如果行號不想從 1 開始的話，可以在「linenums」後面加上「:起始行號」，例如「pre class="prettyprint linenums:123"」

範例如下

#include <stdio.h>

int main(void) {

    printf("Hello World!\n");
    return 0;

}

另外由於< >與&等一些常用符號會因為HTML關係無法正常顯示，建議直接將< >要改成「&lt; &gt;」，&則要改成「&amp;」等xml格式，當然也可以加個<xmp></xmp>將程式碼包起來，範例如下，但這樣在所見即所得與HTML切換時還是會變亂碼，而且在Code Prettify奇數行的行距會變得比較大不知道是不是bug

<pre class="prettyprint"><xmp>你的程式碼貼這邊
</xmp></pre>