html - Formatting for displaying source code on a web page -

I am working on a markdown command line program, and I want to format the source code block in HTML output Better than ordinary & lt; Pre & gt; & Lt; Code & gt; .... & lt; / Code & gt; & Lt; / Pre & gt;

My criteria are:.

1. I have to show the line number in front of every line
2. I have to choose the code myself so that I can only copy the code (and line numbers) to the clipboard

I have tried to use the DIV, because the tables begin to form badly, but I am opening anything.

I tried that:

• The table with one line, cell 1 was a pre / code formatted line number block, and the cell2 was the source code. Problem: The first column, with line number, invariably picked up a lot of space (auto adjusting width is confusing)
• with multiple rows, 1 row with the same problem as the one Table with
• div, I just can not get to the path of div I want to lay them out

How do I make me Can you give an indicator on what to get?

Here's a sample (with a clear border that I use here to show example):

  01 | Source code line 1 02 | Source code 2 line 03 The last line of the source code  

Now if I click on the first line and select and pull down on several lines, then I do not want the line number Column is to be included, otherwise it

I do not need a bonus feature if I narrow the window to control the source code, it needs to be split on two lines. The only way I can understand that this feature will work, each row will work for different-different format individually for each row, so that the line numbers may be adjusted in line number of their terminated. Since I just want to be able to copy the source code, I think I need to format each column instead of my own.

Here's something I've tried:

  & lt; Html & gt; & Lt; Body & gt; & Lt; Style & gt; .lines {background color: # c0c0ff; Border-left: 1 px solid black; Border-top: 1px solid black; Border bottom: 1px solid black; Swim 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; Swim left; Padding-left: 2px; } & Lt; / Style & gt; & Lt; Preclass = 'Line' & gt; & Lt; Code & gt; 01 02 03 & lt; / Code & gt; & Lt; / Pre & gt; & Lt; Previous class = 'code' & gt; & Lt; Code & gt; The table from SELECT * where A = B < / Code & gt; & Lt; / Pre & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

There is a problem with the background color, I would like the background color to continue all the way to the right side of the browser window, but instead it stops right on the right side of the code , To wit. Something like this:

  + ---- + ------------- + | 01 | Select * | | 02 | From the table | | 03 | WHERE A = B + ---- + ------------- +  

When I need something like this:

  + - - + --------------------------------------------- - --------------------------- + | 01 | Select * | | 02 | From the table | | 03 | WHERE A = B + ---- + -------------------------------------------- ------------------------------ +  

You can assign a separate & lt; Pre & gt; tag, and you can use float: left

edit :
2 nd edit :