The source code is already formatted using newline characters and whitespace.
Goals:
- keep source formatting as long as lines fit in the screen horizontally (e.g. pre)
- show line numbers on the left side aligned with the lines (e.g. a table with line numbers in a separate column)
- break lines into multiple lines when they do not fit in the screen (e.g. doable with white-space: pre-wrap)
- never merge whitespace or newline characters (e.g. pre does that)
- for lines that break either show the line number multiple times or just once at the top (e.g. align the line numbers top)
- for lines that break show a small marker image at the end and/or at the beginning (e.g. use background image per line, but for that I need to make the pre elements separate)
- allow selecting and copy/pasting a couple of lines with the mouse without including the line numbers (e.g. a single pre gives this, but otherwise this seems to be impossible)
- outputting HTML and CSS from the server-side, but preferrably without JavaScript
I can’t make it supporting all the above points, seems like it’s impossible. I tried using div, table, pre in various combinations, with white-space: pre-wrap and so on, but had no luck having all the options.
What’s a simple solution?
An ordered list does a decent job. Opera doesn’t copy the line numbers with it, but I think other browsers might do.