Question

我正在研究Markdown命令行程序，我想在html输出中格式化源代码块比简单<pre><code>....</code></pre>更好。

我的标准是：

我想要在每行前面显示行号
我希望代码本身可以选择，这样我只能将代码（而不是行号）复制到剪贴板

我试图使用DIV，因为表格似乎格式不好，但我对任何事情持开放态度。

我尝试了什么：

具有单行的表，单元格1是预/代码格式的行号块，单元格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                                                              |
+----+--------------------------------------------------------------------------+

Answer 1

您可以为行号创建单独的<pre>标记，并使用float: left使其与源<pre>相邻。

编辑：Demo
2 ^nd编辑：Demo with full background

用于在网页上显示源代码的格式

1 个答案: