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

[漫畫]雜談

PS. 本篇是前篇 CSS 的應用實例。

November 19, 2005 · 1 min · Tzeng Yuxio

[CSS]圖文對齊排列

當圖文並列時,若要讓圖片能夠對齊排列,而不是呈現出梯狀的分佈。 可以使用下列語法: <img src="http://where.image.is/picture-01.jpg" style="float:left"> 文字段落一<br> <img src="http://where.image.is/picture-02.jpg" style="float:left; clear:left"> 文字段落二<br> 重點在於第二個 img 內的 “clear:left” 這個屬性的意思是如果左邊有浮動元件的話,此元件便移到該浮動元件下方。 而 “float:left” 則是將所屬元件指定為浮動性質。 下一篇便是應用範例。

November 14, 2005 · 1 min · Tzeng Yuxio

[CSS]純文字 LOGO

發覺純用文字也蠻有趣的,研究了一下,用 CSS 作出幾個感覺還不錯的 logo。用文字 logo 的話,體積也會比使用小貼紙圖片要來得省上許多吧。 flickr <span style="color: blue;">flick</span><span style="color: red;">r</span> ※第一課:只是更改顏色,不難。沒有特地使用 flickr 自己的標準色與字體。 43 Things ...

September 28, 2005 · 1 min · Tzeng Yuxio