Question

我正在使用带有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）上设置一个滚动条。但上面的代码不适用于表行。

Answer 1

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

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

Answer 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%;
}

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

2 个答案: