美化 blogger 程式碼

Web Editor 通常不具備 code 美化功能，須使用 <pre> tag 保留空格、斷行外，再搭配第三方外掛。

這邊介紹幾種常見的外掛

1. Gist - Github 的小服務，有 Embed code 形式，無須註冊
2. 江湖流傳 css - 堪用，讓版面變乾淨
3. Google Code Prettify - 持續維護，語言有限、色調呆板、外掛多
4. highlightjs - 支援169種語言、主題多、支援大文件，無原生行數
5. SyntaxHighlighter - 老牌綠白色，簡單易用，點兩下全選、反白行、行數

幾個幾本需求，資源多、全選、限高、Scroll。
SyntaxHighlighter 功能豐富實用，最符合需求，其他都沒有全選功能，需自行撰寫套件。
Code-Prettify 限高、Scroll 無難度，行數也是官方提供，開發生態豐富。
另外，highlightjs 名稱是最大敗筆，關鍵字鑑別力低，當限高 Scroll 時，非官方的行數無法跟著滾動，殘念...

Note: <pre> tag 作用

• 保留空格、斷行，同理換行不需加上 <br>、空格不用 &nbsp;
• 在 Editor 介面，需切換成 HTML 模式來編輯

Gist

• DEMO

• 做法
1. 進入 https://gist.github.com，無登入的狀態下
1. 若有登入，可以方便管理之前所有的 Snippet
2. Code 顏色是判斷“副檔名”，所以 先填寫檔名欄位
3. Create public gist
   
4. 找到 Embed Code 複製，再到 blog 貼上即可

江湖流傳 css

• Demo

• 做法
1. 加入以下 CSS，以 google blogger 來說 (範本->自訂->進階->新增CSS)
2. 用 <code class="litepretty"></code>包住程式碼
3. 另外增加兩種樣式， .cmd 和 .note 
4. 斷行使用 <br>，也可用 <span class="imp">重要文字</span>

code.litepretty {
    display: block; /* fixes a strange ie margin bug */
    font-family: Courier New;
    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:200px;
    line-height: 1.2em;
}
code.litepretty.cmd {
    background-image: none;
    background-color: black;
    color: white;
}
code.litepretty.note {
    background-color: white;
    color: black;
}
code.litepretty>.imp{
    color: red;
}
code.litepretty>.info{
    color: lightblue;
}
code.litepretty>.cmt{
    color: gray;
}

Google Code Prettify(GitHub)

• Demo
  
• 特性
• 主題
• 關鍵字：google code prettify themes
• 官方 https://cdn.rawgit.com/google/code-prettify/master/styles/index.html
• jmblog https://jmblog.github.io/color-themes-for-google-code-prettify/
• Line Number
• 可使用 class "linenums" 或加上 css(請見 GitHub)
• linenums:4 從4起跳
• 限高

  pre.prettyprint{
      width: auto;
      overflow: auto;
      max-height: 600px
  }

highlightjs(link)

• Demo(官方)
  
• 特性
• 支援最多語言、內建多主題，色彩豐富
• 可自選自產 lib，或直接使用 CDN
• 可另行載入指定語言 JS
• 若字數龐大，有官方 solution
• Line Number 作者不打算支援，需使用 wcoder 撰寫的 外掛

SyntaxHighlighter 4(Github)

• Demo(官方)

結論～視覺動物選 Highlightjs