markdown 写的文章,搭配 pygments 进行代码高亮非常好
Pygments是一个著名的语法高亮工具,它使用Python编程语言实现。
目前Pygments支持超过300种语言或文本格式的语法高亮。
Pygments同时也曾被GitHub、Bitbucket、Phabricator等著名项目用作于其语法高亮工具。
1 |
|
可以在官方网站提供的这个页面进行尝试效果:https://pygments.org/demo/
也可以先查看一下示例效果:https://pygments.org/styles/
官方的教程主要都是教你生成一个 style.css
文件,作为代码高亮的样式
除了自己生成之外,还可以使用已经生成好的 style.css
文件;而且是走的 cdn
我用的高亮样式是 emacs
样式的,style.css
文件地址用的是:
1 |
|
将上面的代码加到 apps/templates/base.html
文件的 <head>
标签中
此时访问文章就可以看到代码高亮的效果了
虽然高亮效果有了,但是代码块没有背景,不够突出;咱们给它加上背景颜色:
编辑 static/css/site.css
文件,添加以下内容:
1 2 3 4 5 |
|
再次刷新页面,可以看到代码块已经突出显示了
代码行数最先想到的是使用 js
来写的,感觉有点难;后来想到 pygments
有可能支持呀,一搜,果然支持
而我们是搭配 markdown
使用的,需要修改 markdown
部分的代码,修改 server.py
文件中的 md2html
函数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
刷新页面,可以看到代码块已经显示行号了
但是新问题来了,代码块变小了,不像之前那样撑起整个页面宽度了
需要调整一下 css
样式,编辑 static/css/site.css
文件,添加以下内容:
1 2 3 4 5 6 7 |
|
再次刷新页面,完美!
=== 全文完 ===