在Django项目中使用Pygments为<pre>标签内的代码显示行号

要给你的代码片段添加行号显示，需要同时调整Pygments的配置和添加对应的CSS样式——Pygments负责生成带行号的HTML结构，样式则让行号看起来更美观、易用。下面是具体的实现步骤：

第一步：配置Pygments生成行号 #

你当前使用的{% pygmentify %}标签支持通过参数开启行号功能，主要有两种行号渲染模式可选：

模式1：表格模式（推荐，行号和代码分离，样式更易控制） #

修改模板中的标签，添加linenos='table'参数：

{% pygmentify linenos='table' %}
<pre class="{{snippet.lang}}">{{snippet.body}}</pre>
{% endpygmentify %}

这种模式下，Pygments会输出一个包含两列的表格：一列是行号，一列是代码内容，结构清晰，方便单独设置行号样式。

模式2：行内模式（行号嵌入代码行开头） #

如果更喜欢行号和代码在同一行内，可以用linenos='inline'参数：

{% pygmentify linenos='inline' %}
<pre class="{{snippet.lang}}">{{snippet.body}}</pre>
{% endpygmentify %}

这种模式会在每行代码前插入一个带lineno类的<span>元素作为行号。

全局配置（可选） #

如果想让所有代码片段默认带行号，可以在Django项目的settings.py中添加全局配置：

PYGMENTS_FORMATTER_OPTIONS = {
    'linenos': True,
    'linenostyle': 'table',  # 替换成'inline'可切换模式
}

这样就不用在每个模板标签里重复写参数了。

第二步：添加CSS样式美化行号 #

不管选哪种模式，都需要CSS来优化行号的显示效果，比如让行号不可选中、和代码区分开：

表格模式对应的样式 #

/* 重置表格样式，避免默认边框和间距 */
.highlight table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

/* 行号列样式 */
.highlight .linenos {
    background-color: #f5f5f5;
    padding: 0.5em 10px;
    text-align: right;
    user-select: none; /* 禁止用户选中行号 */
    color: #999;
    font-size: 0.9em;
}

/* 代码列样式 */
.highlight .code {
    padding: 0.5em 10px;
}

行内模式对应的样式 #

/* 行号元素样式 */
.highlight .lineno {
    display: inline-block;
    width: 35px;
    text-align: right;
    margin-right: 10px;
    color: #999;
    user-select: none;
    font-size: 0.9em;
}

为什么需要两者结合？ #

• Pygments的配置是基础：它决定了是否生成行号的HTML结构，以及行号的呈现方式（表格/行内）。
• CSS样式是优化：默认生成的行号样式可能很简陋，通过样式可以让行号和代码视觉分离，提升可读性，还能避免用户误选中行号。

按照上面的步骤操作后，你的代码片段就能正常显示行号啦！

内容的提问来源于stack exchange，提问作者Sadra