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): ...

March 11, 2012 · 1 min · Tzeng Yuxio

用 google-code-prettify 在網頁中嵌入代碼

作為一個以程式技術為主的網誌,文章中免不了得出現一兩段程式碼。原本我使用 github 的 gist 服務來將程式代碼內嵌到網頁(使用效果見此),另一方面 gist 也可以用來當作是自己的小小代碼備忘錄,許多程式碼片段直接丟上去就好了,非常便利,可說是一舉兩得。 不過有時候只是想要顯示幾行代碼,這些代碼也許不具有完整性,如果將代碼一股腦兒地全丟上 gist,總有一天代碼庫會變成亂葬崗。所以除了 gist 之外,我也找了其他網頁貼程式碼的方案。原本前幾天已經物色好了 SyntaxHighlighter,打算趁週末有空時來實裝測試。結果因為在安裝前四處蒐集資訊,意外又發現到 google-code-prettify,看了一下立刻就變心決定改用 google-code-prettify。 ...

August 7, 2011 · 3 min · Tzeng Yuxio