自訂 Logdown blog 的 code highlight 樣式

之前一直在猶豫到底要不要把 blog 搬移到 Logdown 來的主因是 - 現有的 theme 跟它們搭的 code highlight 樣式實在是太詭異了…

不是說 theme 本身不好,但我個人觀感上覺得除了預設 theme 的 highlight 搭得不錯之外,其它的風格都略顯詭異。

總之,如果要搬移到 Logdown 來,前提就是我要想辦法修改一點點 theme,這邊就來分享一下如何套用你喜歡的 code highlight 樣式。

Rouge (Pygments)

Logdown 所採用的 syntax highlighter 應該是 Rouge

Rouge is a pure-ruby syntax highlighter. It can highlight over 60 languages, and output HTML or ANSI 256-color text. Its HTML output is compatible with stylesheets designed for pygments.

由於是 Pygments-compatible HTML output,因此我們可以去找現有 Pygments 的 theme CSS 來套用。

Theme

馬上找到了我想用的 Tomorrow theme 系列 https://github.com/MozMorris/tomorrow-pygments

產生新的 code highlight CSS

下面列出兩種方法,一種是自己來 generate CSS,另一種是直接抓別人 generate 的來改。

自己 generate

為了使用 pygmentize command,首先要安裝 Pygments。

sudo easy_install Pygments

接著取得 tomorrow-pygments repo 所提供的 pygments styles,並將它們擺進你的 pygments distribution 的 styles 資料夾內。 這步有點 tricky,首先要找到你所用 python 的 site-packages 資料夾,參考這篇 stackoverflow ,可以用以下的 python script 找到。

>>> import site; site.getsitepackages()
['/usr/local/lib/python2.7/dist-packages', '/usr/lib/python2.7/dist-packages']

以我的 OS X Mavericks 來講,最後找到的位置擺放 styles 的位置是 /Library/Python/2.7/site-packages/Pygments-1.6-py2.7.egg/pygments/styles (我是用 easy_install 安裝的)

執行 copy 的動作

copy tomorrow-pygments/styles/*.py /Library/Python/2.7/site-packages/Pygments-1.6-py2.7.egg/pygments/styles/

為了順利產生能夠覆概 theme 原有的 highlight CSS,我們需要觀察一下原本 highlight 用的 CSS selector 是怎麼下的。

KfKLnRyuQ1CdyZwGTO01

得知了目前使用的 theme 的 selector 狀態之後,在使用 pygmentize generate CSS 的時候就需要將前面那部份加入 prefix。

# 格式: pygmentize -f html -S [style name] -a [selector prefix]

pygmentize -f html -S tomorrow -a '.highlight pre' > tomorrow.css

D0rUbTXTjOYMPHx1Vu0P

OK,看來產生出來的 CSS 完全符合需求!

我覺得上面講的好複雜

不想親自 generate 的話,其實也可以直接抓 generate 好的 CSS file 下來做修改。

一樣還是需要觀察 CSS selector,接著看看抓下來的 CSS 內容。 tomorrow-pygments 原本 generate 用的 selector prefix 是 .highlight ,我們只要將它全部取代成 .highlight pre 就行了。

Hosting CSS

本 blog 使用 GitHub Pages 來做 hosting

可以從下列的位置存取各個 pygments theme

套用新的 code highlight CSS

到「Dashboard」->「佈景主題」按下「Custom HTML」,開始編輯 HTML。

於上方 <header> 內的範圍加入下面的 HTML code。

<link rel="stylesheet" href="http://pc035860.github.io/pymaster.logdown.com/css/pygments/tomorrow_night_eighties.css" />

就大工告成啦!!!

所以如果上面都做完了還是不 work 呢

非常有可能是因為 theme 本身的 CSS 裡面下了萬惡的 !important,因此請你也在你 generate (或 replace) 的版本裡面加上 !important,正所謂以暴至暴…

本 blog 所使用的 theme 就是這樣的情況。

現成 Pygments CSS 分享

Pygments 內建系列 https://github.com/richleland/pygments-css

Solarized(Light) https://gist.github.com/scotu/1272660

Solarized(Dark) https://gist.github.com/nicolashery/5765395

Tomorrow 系列 https://github.com/MozMorris/tomorrow-pygments

Twilight https://gist.github.com/dansimpson/803005