pygments HTML的CSS样式

Posted 2023-03-30

技术标签:

【中文标题】pygments HTML的CSS样式【英文标题】：CSS styling of pygments HTML 【发布时间】：2016-01-03 22:50:26 【问题描述】：

我使用 Python 库 pygments 对一些代码进行 pygment 化，然后将其放到我创建的网站上。我见过很多网站显示代码，但是当代码包含长行时，溢出就会被隐藏起来。我不喜欢它被隐藏并希望使容器可滚动。但是，当我添加 CSS 规则时：

.highlighttable 
    margin: auto;
    max-width: 75vw;


.highlighttable .code 
    max-width: calc(74vw - 100px);
    overflow: auto;

整个过程是这样的：

我猜这里发生了以下情况：

滚动条被计算为.code div 元素的大小。包含 div 的 .code 的大小变大了包含行号的 div 以某种方式垂直位于中间

所以我尝试添加以下 CSS 规则：

.linenodiv 
    vertical-align: top;


.linenodiv pre 
    vertical-align: top;

但是，行号 div 仍然移动，如屏幕截图所示。以下是整个表格的html代码：

<table class="highlighttable">
    <tbody>
        <tr>
            <td class="linenos">
                <div class="linenodiv">
                    <pre>1
2
3
4
5
6</pre>

                </div>
            </td>
            <td class="code">
                <div class="highlight">
                    <pre><span class="k">class</span> <span class="nc">TestClass</span><span class="p">:</span>
<span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="k">pass</span>

<span class="k">def</span> <span class="nf">test_method</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">arg1</span><span class="p">,</span> <span class="n">arg1</span><span class="p">,</span> <span class="n">arg1</span><span class="p">):</span>
<span class="k">print</span><span class="p">(</span><span class="n">arg1</span><span class="p">)</span>
</pre>
                </div>
            </td>
        </tr>
    </tbody>
</table>

我在这段代码中减少了arg1s的数量，因为它只是为了显示html代码的结构。

如何将行号 div 向上移动？

编辑#1

这是jsfiddle

似乎 jsfiddle 处理 css 溢出属性的方式与我计算机上的 Firefox 处理方式不同。 jsfiddle 根本不会为overflow: auto; 呈现滚动条，并且该问题在那里不可见。相反，它只是将文本写入 div 之外，就好像有一个 overflow: visible;

【问题讨论】：

拜托，你能给我们看看小提琴吗？ :) @PDKnight：做到了。但是，jsfiddle 存在不呈现任何滚动条的问题。可以join the chatroom吗？ :) 【参考方案1】：

问题是我没有申请