09-代码高亮

  • 阅读: 360
  • 更新: 2022-05-02

markdown 写的文章,搭配 pygments 进行代码高亮非常好
Pygments是一个著名的语法高亮工具,它使用Python编程语言实现。
目前Pygments支持超过300种语言或文本格式的语法高亮。
Pygments同时也曾被GitHub、Bitbucket、Phabricator等著名项目用作于其语法高亮工具。

1. 安装 pygments

1
pip install pygments

可以在官方网站提供的这个页面进行尝试效果:https://pygments.org/demo/
也可以先查看一下示例效果:https://pygments.org/styles/

2. 使用

官方的教程主要都是教你生成一个 style.css 文件,作为代码高亮的样式
除了自己生成之外,还可以使用已经生成好的 style.css 文件;而且是走的 cdn

我用的高亮样式是 emacs 样式的,style.css 文件地址用的是:

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pygments-css@1.0.0/emacs.css">

将上面的代码加到 apps/templates/base.html 文件的 <head> 标签中
此时访问文章就可以看到代码高亮的效果了

3. 调整代码块样式

虽然高亮效果有了,但是代码块没有背景,不够突出;咱们给它加上背景颜色:
编辑 static/css/site.css 文件,添加以下内容:

1
2
3
4
5
pre {
  padding: 10px;
  background-color: #eee;
  border-radius: 2px;
}

再次刷新页面,可以看到代码块已经突出显示了

4. 显示代码行数

代码行数最先想到的是使用 js 来写的,感觉有点难;后来想到 pygments 有可能支持呀,一搜,果然支持
而我们是搭配 markdown 使用的,需要修改 markdown 部分的代码,修改 server.py 文件中的 md2html 函数:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
def md2html(content_md):
    """markdown 转为 html"""
    content_html = markdown.markdown(
        content_md, extensions=[
            'extra',  # 支持表格等其它
            'codehilite'  # 代码高亮
        ],
        extension_configs={
            'codehilite': {
                'linenums': True,  # 显示代码行号
            }
        },
    )
    return content_html

刷新页面,可以看到代码块已经显示行号了
但是新问题来了,代码块变小了,不像之前那样撑起整个页面宽度了
需要调整一下 css 样式,编辑 static/css/site.css 文件,添加以下内容:

1
2
3
4
5
6
7
/* 代码高亮样式 */
.codehilitetable .code {
  width: 100%;
}
.codehilitetable .linenos {
  width: 10px;  /* 测试显示多少都可以 */
}

再次刷新页面,完美!


=== 全文完 ===


欢迎加入QQ群:855013471

京公网安备 11011302003970号 京ICP备2022012301号-1