Web pages for algorithm instruction/documentation.

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View


being a relatively inexperienced HTML user I would like to
ask you if you know of any macro(?), css style(?) or any
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?

I use my own macros for that in TeX: verbatim quote with
1st number declared to be a value of choice.

So far I found nothing like it possible in HTML, but the
world of Web is so vast in its inventiveness, I wanted
ask if such solution exists some place or is described in
one of the books?

Thanks in advance.


Re: Web pages for algorithm instruction/documentation.

ThomasH wrote:

Quoted text here. Click to load it

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.

"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;


<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"
<span class="line-no" >4</span><span class="code" >    l)
<span class="line-no" >5</span><span class="code" >    n)
<span class="line-no" >6</span><span class="code" >    s)
<span class="line-no" >7</span><span class="code" >    t)
<span class="line-no" >8</span><span class="code" >    q)
<span class="line-no" >9</span><span class="code" >    v)
<span class="line-no" >10</span><span class="code" >    h)
<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>
 </body> </html>

Re: Web pages for algorithm instruction/documentation.

Andy Dingley wrote on 20-Apr-06 06:13:
Quoted text here. Click to load it

Thanks for the both hints.

Obviously, we do not have out of the box solutions
comparable to what we can do with the mighty TeX macros!

Currently I experiment with is a script making indeed
a html table(!) from a file, using monospaced font, and
placing comments to the code in a left column.  I will
make some experiments of my script in conjunction with
your CSS (I am a very beginner with CSS and PHP) in an
attempt to "marry" these both ideas.

As soon I will get something presentable, I will post
it here. Someone recommended me to use Awk or perl
generator in lieu of the shell script for better
portability. This also sound interesting.


Quoted text here. Click to load it

Re: Web pages for algorithm instruction/documentation.

Quoted text here. Click to load it

An orderered list, ol, will give you automatic line numbering
(and usually indentation - it does in the browsers I use, anyway)
for subsequent list items, li.  You could create a li class
that suggests a fixed-width font such as courier for rendering.

Computer code often seems to be marked up using the pre element
- see "9.3.4 Preformatted text: The PRE element" of the html 4
specs.  That doesn't give automatic line-numbering, though. Not
sure if it's kosher to use <li><pre>

Site Timeline