0

我想在网页中显示带有行号的源代码。（不幸的是，我不能使用现有的高亮组件，如google-code-prettify，因为我必须使用自己的语法解析器。）

为了防止行号与源代码一起复制和粘贴，我使用了一个包含一行和两个单元格的表格：在第一个单元格中有行号，在第二个单元格中是源代码：

<html><body>
<table>
  <tr>
    <td>1<br/>2<br/>3</td>
    <td>
      <pre>int main() {
    println("I am a very looooooooooooooooog source code line.")
  }</pre>
    </td>
  </tr>
</table>
</body></html>

这行得通，但我有长源代码行的问题：表格变得很宽。如果我打破长线，左侧的行号不再正确。

最好的解决方案是用户可以滚动宽行的表格，就像GitHub 第 88 行的这个示例一样。我尝试了各种 CSS 参数，例如overlay, width，white-space但我没有从 GitHub 获得结果。

如何在没有滚动条的表格中滚动垂直长线？

（或者有没有更好的解决方案来显示没有表格的行号的代码？我见过使用有序列表或文本区域的解决方案，但它们也有问题。）

4

2 回答 2

1

您需要为表格提供 CSStable-layout:fixed;以使其他属性生效。

但是，我不确定如何在不显示滚动条的情况下使其滚动。但是无论如何，您的行号是否不会在它们自己的表格单元格中（因此即使代码行跨越多行，数字仍然会匹配）？

编辑：JSFiddle。您可以尝试以某种方式隐藏滚动条。

于 2013-02-14T14:25:38.317 回答
1

尝试设置您的代码表单元格：

<td>
  <div class="scrollable">
    <pre>int main() {
         println("I am a very looooooooooooooooog source code line.")
         }</pre>
  </div>
</td>

并上课：

.scrollable {
  overflow: scroll;
}

请参阅如何创建溢出时滚动的表格单元格

于 2013-02-14T14:28:14.920 回答