用 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, 不過只有暗色背景的版本。