代码之家  ›  专栏  ›  技术社区  ›  Lasse V. Karlsen

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

  •  5
  • Lasse V. Karlsen  · 技术社区  · 15 年前

    我正在开发一个降价命令行程序,我想在HTML输出中格式化源代码块,这比简单的 <pre><code>....</code></pre> .

    我的标准是:

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

    我尝试使用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                                                              |
    +----+--------------------------------------------------------------------------+
    
    1 回复  |  直到 8 年前
        1
  •  4
  •   SLaks    15 年前

    你可以单独做一个 <pre> 标记行号,并使用 float: left 使其靠近 <预科; 源代码。

    编辑 : Demo
    编辑 : Demo with full background