tags:

views:

105

answers:

1

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:

  1. I want line numbers shown in front of each line
  2. 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, and 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                                                              |
+----+--------------------------------------------------------------------------+
+3  A: 

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
2nd EDIT: Demo with full background

SLaks
I'll post an example of this, because I've had some problems with it, perhaps you can tell me where I'm going wrong with it.
Lasse V. Karlsen
Ooh, demo, let me look at that.
Lasse V. Karlsen
The demo gave me everything I needed, thanks. Will the demo stay up or should I post an answer with what I came up with for the future?
Lasse V. Karlsen
The demos should stay up. (I don't control JSBin)
SLaks
Thanks to you, and a few others, I managed to complete my initial version of md2html in .NET tonight, much appreciated! :)
Lasse V. Karlsen
@Harry: That was used in an earlier version. The line numbers would be generated by a server-side script.
SLaks
Thank you. In addition, this implementation does not create a scroller or line break if the line of code is too long. Do you know how to fix it? (Sorry I accidentally delete the message above)
Harry Pham