使用Pygments來實現代碼高亮

本文最初發佈於個人我的博客：http://jerryzou.com/posts/usePygments/

今天我嘗試更換了我我的博客jerryzou.com中的代碼高亮樣式，主要使用的就是Pygments。Pygments有許多各式各樣的樣式可供選擇，而在這篇文章中，我將爲你們講解如何安裝Pygments、以及如何生成代碼高亮所須要的文件。

安裝Pygments

在OS X中，由於python是預裝的，能夠直接運行指令：

easy_install pip
pip install pygments

在Archlinux上：

sudo pacman -S python-pygments

或者使用python2版的pygments:

sudo pacman -S python2-pygments

在Unbutu和Debian上:

sudo pat-get install python-pygments

在Fedora和CentOS上:

sudo yum install python-pygments

在Gentoo上:

sudo emerge -av dev-python/pygments

生成所需的html文件

若是你用相似Jekyll、hexo等靜態網站生成工具，你就不須要本身生成html文件，能夠直接跳過這一小節。這些工具會幫你自動生成，好比本站就是使用Jekyll生成的。若是你須要本身生成html文件，能夠參照如下的步驟：

假設須要高亮的代碼爲一段js代碼，文件名爲test.js：

var testStr = "hello world";

你須要在終端中輸入：

pygmentize -f html -o test.html test.js

• -f html指明須要輸出html文件
• -o test.html指明輸出的文件名
• test.js就是輸入文件了

最後咱們獲得的html文件大概是這個樣子的：

<div class="highlight"><pre><span class="kd">var</span> <span class="nx">testStr</span> <span class="o">=</span> <span class="s2">&quot;hello world&quot;</span><span class="p">;</span>
</pre></div>

以上把須要生成的代碼按詞法分析拆分紅多個小部分，接下來的問題是如何給這些分好的塊上色呢？因而引出了下一個問題：咱們須要生成對應的css文件。

生成所需的css文件

Pygments提供了十多種高亮樣式的方案，全部可用的方案能夠用以下方式查看：

>>> from pygments.styles import STYLE_MAP
>>> STYLE_MAP.keys()

如此就能夠獲得以下結果：

本博客採用的樣式是tango，若是你喜歡的話，也能夠按這種方案給本身博客的代碼如此着色。言歸正傳，接下來介紹生成css文件的指令：

pygmentize -f html -a .highlight -S default > pygments.css

• -a .highlight指全部css選擇器都具備.highlight這一祖先選擇器
• -S default就是指定所須要的樣式了，各位能夠對各類樣式都嘗試一下。在官網上是能夠直接嘗試的哦！
• > pygments.css將內容輸出到pygments.css文件中

最後pygments.css文件的內容大概是這樣的：

.highlight .hll { background-color: #ffffcc }
.highlight  { background: #f8f8f8; }
.highlight .c { color: #8f5902; font-style: italic } /* Comment */
.highlight .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
.highlight .g { color: #000000 } /* Generic */
.highlight .k { color: #204a87; font-weight: bold } /* Keyword */
.highlight .l { color: #000000 } /* Literal */
.highlight .n { color: #000000 } /* Name */
.highlight .o { color: #ce5c00; font-weight: bold } /* Operator */
.highlight .x { color: #000000 } /* Other */
...

只要在使用到代碼高亮的html文件中，引入這個css樣式就大功告成了。

參考資料：

• http://pygments.org/
• http://segmentfault.com/q/1010000000261050
• http://havee.me/internet/2013-07/jekyll-install.html