ThomasH wrote:
other convenient method which would allow to quote pieces
of code with line numbers and support some sort of inline
or maybe in a 2nd column documentation of the code?
Interesting question! It's not easy.
On the whole, I'd suggest using a <table>. Whatever you do, the markup
is nasty and bulky. It's not a job for hand coding, it's a job for a
script to generate (XSLT, Perl, sed whatever)
The root of the problem is HTML's poor flow model. It's just not
possible to have three column cells across a row and to preserve the
row alignments, unless you start using heavy-handed markup on every
cell. This is basically a <table> (and the anti-table weenies should
shut up, as this _is_ tabular data as soon as you make this
requirement). There's no way I know to have "a column of code" and to
attach annotations to it accurately aligned to line positions, or to
add the line numbering.
Maybe you could do it with <ol> and a <li> per line, but the CSS
properties to control numbering are poorly supported.
Here's my quick half-cup-of-coffee hack at it instead with floats. It
degrades without CSS fairly well, owing to the use of <pre>, but it's
very whitespace sensitive.
You may also need to (and should) wrap the code in <![CDATA[ ... ]]>
sections, in case of embedded "<" etc.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en"><head>
<title>Code Listing</title>
<style type="text/css" >
body {
color: #000;
background-color: #8FECFF;
font-size: 1em;
}
pre.code-listing {
border: thin inset #777;
background-color: #eee;
color: #000;
margin: 1em;
padding: 2em 1em ;
}
.code-listing>* {
margin: 0;
padding: 0;
}
.code-listing .line-no {
clear: left;
float: left;
display: block;
width: 3em;
text-align: right;
padding-right: 2em;
}
.code-listing .code {
display: block;
float: left;
clear: none;
width: 50%;
}
.code-listing .annotation {
float: left;
clear: none;
display: block;
background-color: #FAFFCF;
color: #000;
font-family: serif;
font-style: oblique;
padding: 0.125em 1em;
}
</style>
</head><body>
<pre class="code-listing" >
<span class="line-no" >1</span><span class="code" >while getopts
"hlnstvq" flag</span>
<span class="line-no" >2</span><span class="code" >do</span><span
class="annotation" >Foo bar bat</span>
<span class="line-no" >3</span><span class="code" > case "$flag"
in</span>
<span class="line-no" >4</span><span class="code" > l)
LOCAL_FILES_FOR_LOCAL_PEOPLE=y;;</span>
<span class="line-no" >5</span><span class="code" > n)
NO_NOTES=y;;</span>
<span class="line-no" >6</span><span class="code" > s)
QUICK_VIEW=y;;</span>
<span class="line-no" >7</span><span class="code" > t)
TRUNKS_ONLY=y;;</span>
<span class="line-no" >8</span><span class="code" > q)
QUIET=y;;</span>
<span class="line-no" >9</span><span class="code" > v)
VERBOSE=y;;</span>
<span class="line-no" >10</span><span class="code" > h)
help;;</span>
<span class="line-no" >11</span><span class="code" > ?) echo
"Ignoring unimplemented option: "$flag</span>
<span class="line-no" >12</span><span class="code" > esac</span>
<span class="line-no" >13</span><span class="code" >done</span>
</pre>
</body> </html>
