使用Pygments来实现代码高亮

hiyang 发布于2019-08-28 17:58 / 3122人阅读

摘要：本文最初发布于我的个人博客今天我尝试更换了我个人博客中的代码高亮样式，主要使用的就是。在官网上是可以直接尝试的哦将内容输出到文件中最后文件的内容大概是这样的只要在使用到代码高亮的文件中，引入这个样式就大功告成了。

本文最初发布于我的个人博客：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

idc机房托管混合云代码高亮代码高亮插件 bootstrap代码高亮 VBScript版代码高亮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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中那样！），我们将使用Markdown语法。安装Markdown Markdown是一种轻量级的标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的或...

沈建明 2019-07-30 17:53 评论0 收藏0
Django 学习小组：博客开发实战第三周教程——文章列表分页和代码语法高亮

摘要：本教程内容已过时，更新版教程请访问博客开发入门教程。当分页较多时，总是显示当前页及其前几页和后几页的页码教程中使用的是两页，其他页码用省略号代替。本教程内容已过时，更新版教程请访问： django 博客开发入门教程。摘要：前两期教程我们实现了博客的 Model 部分，以及 Blog 的首页视图 IndexView，详情页面 DetailView，以及分类页面 CategoryVi...

Luosunce 2019-07-25 10:28 评论0 收藏0