我正在开发一个 Markdown 命令行程序，我想将 html 输出中的源代码块格式化得比简单的 <pre><code>....</code></pre> 好一点。 .
我的标准是:
- 我想在每行前面显示行号
- 我希望代码本身是可选的，这样我就可以只将代码(而不是行号)复制到剪贴板
我尝试过使用 DIV，因为表格的格式似乎很糟糕，但我对任何事情都持开放态度。
我尝试过的:
- 单行表格，单元格 1 是预/代码格式的行号 block ，单元格 2 是源代码。问题:带有行号的第一列总是占用大量空间(自动调整宽度似乎很困惑)
- 多行表格，和1行表格一样的问题
- DIV，我似乎无法让 DIV 以我想要的方式布局
任何人都可以指导我如何获得我想要的东西吗？
这是一个示例(明显的限制是我使用 Markdown 来显示此处的示例):
01 | Source code line 1
02 | Source code line 2
03 | Last line of source code
现在，如果我在第一行上单击并选择，然后向下拖动多行，我不希望选择包括行号列，否则这会很容易。
那么，有什么建议吗？
我不需要的一个额外功能是，如果我将窗口设置得太窄而无法包含源代码，我不需要将它分成两行。我能理解该功能如何工作的唯一方法是单独格式化每一行，而不是单独格式化每一列，这样当发生换行时，行号也会在它们的位置得到调整。因为我只想复制源代码，所以我认为我需要自己格式化每一列。
这是我尝试过的:
<html><body>
<style>
.lines
{
background-color: #c0c0ff;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
border-right: 1px solid #a0a0a0;
margin-left: 20px;
padding-left: 2px;
padding-right: 2px;
}
.code
{
background-color: #c0c0ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
padding-left: 2px;
}
</style>
<pre class='lines'><code>01
02
03</code></pre>
<pre class='code'><code>SELECT *
FROM TABLE
WHERE A = B
</code></pre>
</body></html>
背景颜色有问题，我希望背景颜色一直延伸到浏览器窗口的右侧，但它恰好在代码右侧停止，即。像这样:
+----+-------------+
| 01 | SELECT * |
| 02 | FROM TABLE |
| 03 | WHERE A = B |
+----+-------------+
当我想要这样的东西时:
+----+--------------------------------------------------------------------------+
| 01 | SELECT * |
| 02 | FROM TABLE |
| 03 | WHERE A = B |
+----+--------------------------------------------------------------------------+
最佳答案
你可以做一个单独的<pre>标记行号，并使用 float: left使其与 <pre> 相邻与来源。
编辑:Demo
第 2 编辑:Demo with full background
关于html - 在网页上显示源代码的格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2128578/