Python 运维开发

Appearance

代码高亮 ​

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

1. 安装 pygments ​

python
pip install pygments

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

2. 使用 ​

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

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

html
<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 文件，添加以下内容：

css
pre {
  padding: 10px;
  background-color: #eee;
  border-radius: 2px;
}

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

4. 显示代码行数 ​

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

python
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 文件，添加以下内容：

css
/* 代码高亮样式 */
.codehilitetable .code {
  width: 100%;
}
.codehilitetable .linenos {
  width: 10px;  /* 测试显示多少都可以 */
}

再次刷新页面，完美！