我正在开发一个降价命令行程序,我想在HTML输出中格式化源代码块,这比简单的
<pre><code>....</code></pre>
.
我的标准是:
-
我要在每一行前面显示行号
-
我希望代码本身是可选择的,这样我就可以只将代码(而不是行号)复制到剪贴板上。
我尝试使用DIV,因为表的格式似乎不好,但我对任何东西都开放。
我的尝试:
-
表中只有一行,单元格1是一个预/代码格式的行号块,单元格2是源代码。问题:带行号的第一列总是占用大量空间(自动调整宽度似乎有点混乱)
-
有多行的表,与有一行的问题相同
-
我就是不能让他们按我想要的方式布置。
有人能告诉我如何得到我想要的东西吗?
这是一个示例(有明显的限制,我使用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 |
+