Jekyll Markdown Syntax Highlighting

當初會被吸引來用 Jekyll 還來搭建這個 Blog ,其中一個很大的原因,也是因為內建的 Markdown expression 可以很方便的幫一些範例 Code 做美美的 Syntax Highlighting。不過 Highlighting 的 style 通常都被 Template 寫死在 css 裡。所以當我在用這個 Template 我就很樣把預設的 style 換掉,所以在做了一下 Serve 找到了修改的方法。

Pygments

首先 Jekyll 得標色其實是用一個 python 的 Syntax highlighter Pygments 所 gen 出來的,Pygments 其實非常強大,支援100多種語言並且輸出成各式各樣的格式,這裡我們是使用 html。 所以首先我們要先下載做新版本的 Pygments , 並用 python 安裝。

The Syntax Highlighting style is actually extracted form a generic syntax highlighter written in python called Pygments. Pygments supports 300 languages and other text formats. For here, we are using the html style. First of all, download the latest version of Pygments, and install it with python.

tar xf Pygments-2.1.3.tar.gz
cd Pygments-2.1.3
sudo python setup.py install

Configuration

再來確認你的 _config.yml 當中的 highlighter 設為 pygments

Make sure you set highlighter into pygments in your _config.yml.

# Jykell configuration
markdown: redcarpet
highlighter: pygments
...

把你的路徑移到 Template 的 css 資料夾下 , 以我的 Template 是在 /assets/css 你可以看到會有一個 syntax.css ,這個就是用來標色的 style 。

Change you directory to the css folder in your Template. In my case, it is located at /assets/css. You should find a syntax.css which denotes the syntax highlighting.

Select Highlight Style

此時你可以到 Pygments官網 去選擇你喜歡的 style , 這裡我使用 monokai 這個 style 。 最後下以下指令,把新的 syntax 套色導到 syntax.css

At this point, you can pick your favorite color highlighting style here. I am using style monokai in this demonstration. Finally, enter the scripts below to replace the syntax.css

pygmentize -S monokai -f html > syntax.css

Background Color

最後要注意的是,code block 底色的 css 並不是寫在 syntax.css 裡面,所以如果你是從白底套色改成黑底套色, 可能就會發現字都變不見了,所以只要手動修改 code block 底色就可以了,通常都是 pre 這個 class 的 background-color , 以我的 Template 就在 screen.css 裡面。

Last but not least, if you change the style from a white background-color theme to a background-color theme, you will notice that the words are disappeared. This is because that the code block background-color is not denoted in the syntax.css. You should change it manually. It is usually denoted in pre css class. So I simply change the pre class background-color in screen.css.