當初會被吸引來用 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
.