Geek Answers Handbook

Formatting to display source code on a web page

I am working on a Markdown command line program, and I would like to format the source code of the code in the html output a little better than simple <pre><code>....</code></pre>.

My criteria:

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

I tried using the DIV, since the tables seem to be poorly formatted, but I'm open to anything.

What I tried:

  • A table with one row, cell 1 was a block with a line number in the pre / code format, and cell 2 was the source code. Problem: the first column with line numbers invariably took up a lot of space (automatic width adjustment seems confusing)
  • A table with multiple rows with the same problem as with 1 row
  • DIV, I just can't get the DIV to lay out how I want them.

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

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

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

Now, if I click and select in the first row and drag a few rows, I don’t want the selection to include a row number column, otherwise it would be easy peasy.

So, any pointers?

, , , , , . , , - , , , . , , .

- :

<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                                                              |
+----+--------------------------------------------------------------------------+
+5
1

<pre> float: left, <pre> .

EDIT: -
2 nd EDIT:

+4

More articles:


All Articles