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

ang*_*son 5 html css

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

我的标准是:

  1. 我想要在每行前面显示行号
  2. 我希望代码本身是可选择的,这样我只能将代码(而不是行号)复制到剪贴板

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

我尝试了什么:

  • 具有单行的表,单元1是预/代码格式的行号块,单元2是源代码.问题:带行号的第一列总是占用大量空间(自动调整宽度似乎变得困惑)
  • 具有多行的表,与具有1行的一行相同的问题
  • DIV,我似乎无法让DIV以我想要的方式布局

任何人都可以给我一个如何获得我想要的指针吗?

这是一个示例(明显的限制是我使用Markdown来显示这里的示例):

01 |  Source code line 1
02 |  Source code line 2
03 |  Last line of source code
Run Code Online (Sandbox Code Playgroud)

现在,如果我在第一行单击并选择,并向下拖动多行,我不希望选择包含行号列,否则这将很容易.

那么,任何指针?

我不需要的一个奖励功能是,如果我使窗口太窄而不能包含源代码,我不需要将它分成两行.我能理解该功能如何工作的唯一方法是单独格式化每一行,而不是单独格式化每一行,以便在发生换行时调整行号.由于我希望只能复制源代码,因此我认为我需要自己格式化每个列.

这是我尝试过的东西:

<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>
Run Code Online (Sandbox Code Playgroud)

这有一个背景颜色的问题,我希望背景颜色一直延续到浏览器窗口的右侧,而是它停在恰好的代码右边,即.这样的事情:

+----+-------------+
| 01 | SELECT *    |
| 02 | FROM TABLE  |
| 03 | WHERE A = B |
+----+-------------+
Run Code Online (Sandbox Code Playgroud)

当我想要这样的东西时:

+----+--------------------------------------------------------------------------+
| 01 | SELECT *                                                                 |
| 02 | FROM TABLE                                                               |
| 03 | WHERE A = B                                                              |
+----+--------------------------------------------------------------------------+
Run Code Online (Sandbox Code Playgroud)

SLa*_*aks 4

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

编辑演示
第二编辑具有完整背景的演示