Menu
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've attempted to use DIV's, since tables seems to format badly, but I'm open to anything.
What I tried:
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 |
+----+--------------------------------------------------------------------------+
227
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
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
