使用Pygments來實現代碼高亮

hiyang 發布于2019-08-28 17:58 / 3336人閱讀

摘要：本文最初發布于我的個人博客今天我嘗試更換了我個人博客中的代碼高亮樣式，主要使用的就是。在官網上是可以直接嘗試的哦將內容輸出到文件中最后文件的內容大概是這樣的只要在使用到代碼高亮的文件中，引入這個樣式就大功告成了。

本文最初發布于我的個人博客：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文件大概是這個樣子的：

var testStr = "hello world";

以上把需要生成的代碼按詞法分析拆分成多個小部分，接下來的問題是如何給這些分好的塊上色呢？于是引出了下一個問題：我們需要生成對應的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

云服務器 GPU云服務器代碼高亮代碼高亮插件 bootstrap代碼高亮 VBScript版代碼高亮

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110921.html

使用Pygments來實現代碼高亮

摘要：本文最初發布于我的個人博客今天我嘗試更換了我個人博客中的代碼高亮樣式，主要使用的就是。在官網上是可以直接嘗試的哦將內容輸出到文件中最后文件的內容大概是這樣的只要在使用到代碼高亮的文件中，引入這個樣式就大功告成了。本文最初發布于我的個人博客：http://jerryzou.com/posts/usePygments/ 今天我嘗試更換了我個人博客jerryzou.com中的代碼...

cangck_X 2019-08-01 14:41 評論0 收藏0
使用Pygments來實現代碼高亮

摘要：本文最初發布于我的個人博客今天我嘗試更換了我個人博客中的代碼高亮樣式，主要使用的就是。在官網上是可以直接嘗試的哦將內容輸出到文件中最后文件的內容大概是這樣的只要在使用到代碼高亮的文件中，引入這個樣式就大功告成了。本文最初發布于我的個人博客：http://jerryzou.com/posts/usePygments/ 今天我嘗試更換了我個人博客jerryzou.com中的代碼...

jzman 2019-07-24 17:40 評論0 收藏0
Django 博客開發教程 9 - 支持 Markdown 語法和代碼高亮

摘要：注意如果你按照教程中的方法做完后發現代碼依然沒有高亮，請依次檢查以下步驟確保在渲染文本時添加了拓展，詳情見上文。有些樣式文件可能對代碼高亮沒有作用，首先嘗試用樣式文件做測試。在支持語法和代碼高亮追夢人物的博客的評論區留言。為了讓博客文章具有良好的排版，顯示更加豐富的格式，我們使用 Markdown 語法來書寫我們的博文。Markdown 是一種 HTML 文本標記語言，只要遵循它約定...

zr_hebo 2019-07-31 10:57 評論0 收藏0
Django搭建個人博客：使用Markdown語法書寫文章

摘要：重新打開一個命令行窗口，進入虛擬環境，安裝是一種通用語法高亮顯示器，可以幫助我們自動生成美化代碼塊的樣式文件。上一章我們實現了文章詳情頁面。為了讓文章正文能夠進行標題、加粗、引用、代碼塊等不同的排版（像在Office中那樣?。覀儗⑹褂肕arkdown語法。安裝Markdown Markdown是一種輕量級的標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉換成有效的或...

沈建明 2019-07-30 17:53 評論0 收藏0
Django 學習小組：博客開發實戰第三周教程——文章列表分頁和代碼語法高亮

摘要：本教程內容已過時，更新版教程請訪問博客開發入門教程。當分頁較多時，總是顯示當前頁及其前幾頁和后幾頁的頁碼教程中使用的是兩頁，其他頁碼用省略號代替。本教程內容已過時，更新版教程請訪問： django 博客開發入門教程。摘要：前兩期教程我們實現了博客的 Model 部分，以及 Blog 的首頁視圖 IndexView，詳情頁面 DetailView，以及分類頁面 CategoryVi...

Luosunce 2019-07-25 10:28 評論0 收藏0