Formatting for displaying source code on a web page_问答_开发者

Formatting for displaying source code on a web page

开发者 https://www.devze.com 2022-12-18 10:30 出处：网络

I\'m working on a Markdown command line program, and I\'d like to format source code blocks in the html output a bit better than a simple <pre><code>....</code></pre>.

相关专题：css

I'm working on a Markdown command line program, and I'd like to format source code blocks in the html output a bit better than a simple <pre><code>....</code></pre>.

My criteria are:

I want line numbers shown in front of each line
I want the code by itself to be selectable so that I can copy only the code (and not the line numbers) to the clipboard

I've attempted to use DIV's, since tables seems to format badly, but I'm open to anything.

What I tried:

Table with a single row, cell 1 was a pre/code formatted line number block, and cell 2 was the source code. Problem: First column with line numbers invariably took up a lot of space (auto-adjusting widths seems to get confused)
Table with multiple rows, same problem as the one with 1 row
DIV's, I just can't seem to get the DIV's to lay out the way I want them

Can anyone give me a pointer on how to get what I want?

Here's a sample (with the obvious limitation that I use Markdown to show the example here):

01 |  Source code line 1
02 |  Source code line 2
03 |  Last line of source code

Now if I click and select on the first line, a开发者_开发技巧nd drag down over multiple lines, I don't want the selection to include the line number column, otherwise this would be easy peasy.

So, any pointers?

One bonus feature I don't need is that if I make the window too narrow to contain the source code, I don't need it to split up over two lines. The only way I can understand how that feature would work would be to format each line individually, instead of each column individually, so that the line numbers also got adjusted in their position when the line break occurred. Since I want to be able to copy only the source code, I figure that I need to format each column by itself instead.

Here's something I've tried:

<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>

This has a problem with the background color, I'd like the background color to continue all the way to the right side of the browser window, but instead it stops just right of the code, ie. something like this:

+----+-------------+
| 01 | SELECT *    |
| 02 | FROM TABLE  |
| 03 | WHERE A = B |
+----+-------------+

when I would like something like this:

+----+--------------------------------------------------------------------------+
| 01 | SELECT *                                                                 |
| 02 | FROM TABLE                                                               |
| 03 | WHERE A = B                                                              |
+----+--------------------------------------------------------------------------+

You could make a separate <pre> tag for the line numbers, and use float: left to make it adjacent to the <pre> with the source.

EDIT: Demo
2^nd EDIT: Demo with full background