用 Solarized 幫 google-code-prettify 上色

我用 google-code-prettify 來做 blog 文章中的代碼上色，google-code-prettify 本身有附上幾個 Color Scheme, 然而除了預設的之外，都是以暗色背景為主。

昨天心血來潮將 Solarized 這個 Color Scheme 移植到 google-code-prettify 下，同樣也是 dark/light 雙版本。關於 Solarized 的介紹可以參考這篇文章。

下載 / Download

• Solarized Light
  • Download Normal version
  • Download Minified version
• Solarized Dark
  • Download Normal version
  • Download Minified version

代碼 / Code

Solarized Light

正常排版版本 (download)：

.pln{color:#657b83}
@media screen{
    .str{color:#2aa198}
    .kwd{color:#859900}
    .com{color:#93a1a1}
    .typ{color:#b58900}
    .lit{color:#2aa198}
    .pun,.opn,.clo{color:#657b83}
    .tag{color:#268bd2}
    .atn{color:#93a1a1}
    .atv{color:#2aa198}
    .dec,.var{color:#268bd2}
    .fun{color:red}
}
@media print,projection{
    .str{color:#060}
    .kwd{color:#006;font-weight:bold}
    .com{color:#600;font-style:italic}
    .typ{color:#404;font-weight:bold}
    .lit{color:#044}
    .pun{color:#440}
    .tag{color:#006;font-weight:bold}
    .atn{color:#404}
    .atv{color:#060}
}
pre.prettyprint{padding:5px;border:1px solid #888;background:#fdf6e3}
ol.linenums{margin-top:0;margin-bottom:0}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}
li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

最小化版本 (download)：

.pln{color:#657b83}@media screen{.str{color:#2aa198}.kwd{color:#859900}.com{color:#93a1a1}.typ{color:#b58900}.lit{color:#2aa198}.pun,.opn,.clo{color:#657b83}.tag{color:#268bd2}.atn{color:#93a1a1}.atv{color:#2aa198}.dec,.var{color:#268bd2}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:5px;border:1px solid #888;background:#fdf6e3}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

Solarized Dark

正常排版版本 (download)：

.pln{color:#839496}
@media screen{
    .str{color:#2aa198}
    .kwd{color:#859900}
    .com{color:#586175}
    .typ{color:#b58900}
    .lit{color:#2aa198}
    .pun,.opn,.clo{color:#839496}
    .tag{color:#268bd2}
    .atn{color:#586175}
    .atv{color:#2aa198}
    .dec,.var{color:#268bd2}
    .fun{color:red}
}
@media print,projection{
    .str{color:#060}
    .kwd{color:#006;font-weight:bold}
    .com{color:#600;font-style:italic}
    .typ{color:#404;font-weight:bold}
    .lit{color:#044}
    .pun{color:#440}
    .tag{color:#006;font-weight:bold}
    .atn{color:#404}
    .atv{color:#060}
}
pre.prettyprint{padding:5px;border:1px solid #888;background:#002b36}
ol.linenums{margin-top:0;margin-bottom:0}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}
li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}

最小化版本 (download)：

.pln{color:#839496}@media screen{.str{color:#2aa198}.kwd{color:#859900}.com{color:#586175}.typ{color:#b58900}.lit{color:#2aa198}.pun,.opn,.clo{color:#839496}.tag{color:#268bd2}.atn{color:#586175}.atv{color:#2aa198}.dec,.var{color:#268bd2}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:5px;border:1px solid #888;background:#002b36}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}

範例 / Example (in dark version)

import java.util.Map;
import java.util.TreeSet;

public class GetEnv {
  /**
   * let's test generics
   * @param args the command line arguments
   */
  public static void main(String[] args) {
    // get a map of environment variables
    Map<String, String> env = System.getenv();
    // build a sorted set out of the keys and iterate
    for(String k: new TreeSet<String>(env.keySet())) {
      System.out.printf("%s = %s\n", k, env.get(k));
    }
  }    
}

---

網路上有找到這篇也有 solarized color for google-pretty-code, 不過只有暗色背景的版本。

代碼配色，從 Zenburn 到 Solarized

這些年來，我的代碼配色方案都是以 zenburn 為首選。深色底，低對比，對眼睛舒服，代碼的段落也清晰。zenburn 也是網路上很受歡迎的配色，這有一個好處，就是越多人用就越有可能被 porting 到不同的 IDE 或 Editor 上，所以從 Visual Studio 到 Eclipse 再到 XCode 都可以找到現成的 zenburn 設定。

上圖就是目前在用的 zenburn。由於用這麼久都已經習慣了，從沒有想過會有第二種配色讓我如此滿意，結果前天突然發現 Solarized 這一組配色，當場就被迷住了，我才認識這組配色不到 24 小時，就把 zenburn 從我的 vimrc 中換掉了。

• 官方網站：Solarized - Ethan Schoonover
• GitHub 檔案庫：altercation / solarized - GitHub

說起來，會注意到 Solarized 也是無心插柳。原本是在找 markdown + blogger 的 solution, 沒有找著，倒是見到了一個以 github 為基礎的 blog framework, 叫 Octopress。我對 Octopress 沒有太多興趣，純粹好奇它的技術架構（畢竟以 SCM 作為 blog 後端，是很有趣的想法），所以研究了一下。然後意外地在〈使用 Octopress + GitHub 免費架設部落格，以 Markdown 語法快速發表文章〉這篇文章中意外地注意到 Solarized 這組配色。

Solarized 最令我覺得神奇的地方，就在於同一組基本色，可以任意搭配淺白色或淺黑色背景，都一樣清晰明瞭。它的色盤也控制在 16 色內，所以即使在終端機模式下使用也不會突兀。在官方網站上，也列出了 Visual Studio 與 Xcode 等 IDE 的配色支援；for eclipse 的配色網路上搜尋得到，不過官網上沒列出，不曉得是不是名字相衝的緣故（太陽 vs. 日蝕）=P

我在終端機純文字模式下的 Vim 與圖形介面的 MacVim 分別指定了 Light 與 Dark 兩種配色。這樣在 Vim 中編輯時，只要瞄一下我就可以知道現在是在終端機模式下還是獨立的 Mac App。

另外這配色除了用在程式碼外，也有提供給一般應用程式使用的版本，例如常見的 putty, OSX 自帶的 Terminal, 以及 iTerm 2 等。一樣都可以在 Solarized 放在 GitHub 上的 Repository 上找到。