Solarized for 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)
網路上有找到這篇也有 solarized color for google-pretty-code, 不過只有暗色背景的版本。