带有行号的 Pygments HTML 表格 - 代码单元的水平滚动条

Posted 2023-03-30

【中文标题】带有行号的 Pygments HTML 表格 - 代码单元的水平滚动条

【英文标题】：Pygments HTML table with line numbers - horizontal scrollbar for the code cell

【发布时间】：2012-01-09 15:00:54

【问题描述】：

我正在使用带有codehilite 和lineos 选项的Markdown 的Python 实现。它产生如下代码：

<table class="codehilitetable">
    <tr>
        <td class="linenos">
            <div class="linenodiv">
                <pre>1
                     2</pre>
            </div>
        </td>
        <td class="code"><div class="codehilite"><pre>
            <span class="k">def</span>
            <span class="nf">func</span>
            <span class="p">(</span>
            <span class="n">n</span>
            <span class="p">):</span>
            <span class="k">return</span>
            <span class="n">n</span> 
            <span class="o">**</span>
            <span class="mi">2</span>
            <span class="o">+</span>
            <span class="mi">3</span>
            <span class="o">*</span>
            <span class="n">n</span>
            <span class="o">+</span>
            <span class="mi">1</span>
        </pre></div></td>
    </tr>
</table>

这是一个有一行和两个单元格的表格；第一个单元格用于行号，第二个单元格用于实际代码。每个单元格的内容都在div 和pre 元素内，span 元素用于语法着色。

我想显示一个水平滚动条以防一行代码太长，但我遇到了问题，因为它是一个表格。

理想情况下，我希望滚动条仅位于代码单元格 (td.code) 上，但这仅在将表格的宽度设置为 100% 时才有效，这使得两个单元格的长度都为 50%。我希望行号单元格 (td.linenos) 与显示实际行号所需的长度一样长。

这是我当前的 CSS：

pre, code  overflow:auto; 

table.codehilitetable  table-layout: fixed; white-space: nowrap; width:100%; 

如果这是不可能的，那么我想在整行上有一个滚动条 (tr)。但是上面的代码不适用于表格行。

【参考方案1】：

.codehilite
          width:100%;
          height: auto;
          overflow: auto;
        

如果需要，这将使代码表单元格内的 div 具有水平滚动条。

【讨论】：

我认为这比我得到的更接近，但现在td.code 单元格就像一条太长的线，除非我将表格的宽度设置为 100%，这再次弄乱了单元格.只有当我将.codehilite 的宽度设置为小于 100% 时，才会显示滚动条。

啊，我明白你的意思了。你有什么原因不能在桌子上设置特定的宽度吗？

【参考方案2】：

并非所有这些都是必要的，但其中一些使它起作用。

由于某种原因，使 pre 容器非常小，使它可以正常滚动。

.codehilite pre, .codehilitetable .linenodiv pre 
    font-size: 1em;
    line-height: 1.4em;

table.docutils, table.docutils tbody, table.docutils tr, table.docutils td 
    width: 100%;
    max-width: 100%;
    display: block;

.codehilitetable td.linenos, .codehilitetable .linenodiv pre 
    padding: 0;
    border-right: none;
    display: table-cell;
    width: 50px;

.codehilitetable td.code 
    display: table-cell;
    overflow-x: scroll !important;

.codehilitetable td.code .codehilite
    max-width: 100%;

.codehilitetable td.code .codehilite pre 
    width: 10px;
    max-width: 100%;