我正在开发一个Markdown命令行程序，希望在html输出中格式化源代码块，而不是简单的
我的要求如下：
1. 每行代码前都要显示行号。 2. 代码本身可选择，以便我可以只复制代码（而不复制行号）到剪贴板。
我尝试使用DIV，因为表格的格式似乎很糟糕，但我对任何东西都持开放态度。
我尝试过以下方法：
1. 表格有一行，第一列是预先/代码格式化的行号块，第二列是源代码。问题：带有行号的第一列总是占用大量空间（自动调整宽度似乎会混淆）。 2. 表格有多行，与一行的问题相同。 3. DIV，我似乎无法使DIV按照我想要的方式布局。
请问有人能给我指点如何达到我的要求吗？
这里是一个示例（显然，我使用Markdown来显示示例）：
现在，如果我点击并选择第一行，并向下拖动多行，我不希望选择包括行号列，否则这将非常容易。那么，有什么建议吗？
我不需要的一个额外功能是，如果我将窗口缩小到无法容纳源代码，我不需要它分成两行。我能理解这个功能的工作方式是对每行进行单独格式化，而不是对每列进行单独格式化，因此当换行发生时，行号也会调整其位置。由于我只想复制源代码，所以我认为我需要单独格式化每一列。
以下是我尝试过的内容：
当我需要类似于这样的东西时：
<pre><code>....</code></pre>。我的要求如下：
1. 每行代码前都要显示行号。 2. 代码本身可选择，以便我可以只复制代码（而不复制行号）到剪贴板。
我尝试使用DIV，因为表格的格式似乎很糟糕，但我对任何东西都持开放态度。
我尝试过以下方法：
1. 表格有一行，第一列是预先/代码格式化的行号块，第二列是源代码。问题：带有行号的第一列总是占用大量空间（自动调整宽度似乎会混淆）。 2. 表格有多行，与一行的问题相同。 3. 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 |
+----+--------------------------------------------------------------------------+