JupyterLab中Pygments语法高亮输出单元格背景色异常求助

问题背景 #

在传统Jupyter Notebook中，用Pygments结合自定义GhDarkStyle实现SQL语法高亮显示正常，但切换到JupyterLab后样式完全失效。复现代码如下：

from IPython.display import display, HTML
from pygments import highlight
from pygments.lexers import SqlLexer
from pygments.formatters import HtmlFormatter

from helpers.mystyle import GhDarkStyle

fmtter = HtmlFormatter(style=GhDarkStyle)

query = """
SELECT
   *
FROM
   latest.tmp
"""
display(
    HTML(
        '<style type="text/css">{}</style>    {}'.format(
            fmtter.get_style_defs(".highlight"), highlight(query, SqlLexer(), fmtter)
        )
    )
)

环境版本：pygments 2.14.0、jupyter-lab 3.5.3，基于jupyter/scipy-notebook:python-3.10.8镜像。手动给单个<span>添加高亮属性能临时生效，但这种方式繁琐且不优雅。

问题根源 #

JupyterLab的默认CSS样式优先级高于Pygments生成的.highlight类样式，且Lab的DOM结构和传统Notebook不同，导致自定义样式被覆盖。

修复方法 #

1. 提升样式选择器优先级 #

修改样式定义的选择器，加入JupyterLab输出区域的专属类前缀，让自定义样式优先级更高：

display(
    HTML(
        '<style type="text/css">{}</style>    {}'.format(
            fmtter.get_style_defs(".jp-Cell-outputWrapper .highlight"), 
            highlight(query, SqlLexer(), fmtter)
        )
    )
)

2. 生成完整重置样式 #

初始化HtmlFormatter时添加full=True参数，让Pygments生成包含基础样式重置的完整CSS，避免和Lab默认样式冲突：

fmtter = HtmlFormatter(style=GhDarkStyle, full=True)

3. 用专属类名+强制覆盖（应急方案） #

给自定义样式设置唯一类名，必要时用!important强制覆盖默认样式：

fmtter = HtmlFormatter(style=GhDarkStyle, cssclass="custom-sql-highlight")
display(
    HTML(
        '<style type="text/css">{}</style>    {}'.format(
            fmtter.get_style_defs(".custom-sql-highlight"), 
            highlight(query, SqlLexer(), fmtter)
        )
    )
)

对应的样式关键属性可添加!important（尽量少用，仅在其他方法无效时使用）：

.custom-sql-highlight .hll { background-color: #161b22 !important; }
.custom-sql-highlight { background: #0d1117 !important; }

验证 #

修改后重新运行单元格，检查SQL代码的关键字颜色、背景色等是否符合GhDarkStyle的预期效果。

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