Solarized for google-code-prettify

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

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

下載 / Download

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