How do I format code neatly in HTML/CSS ? I especially want to use the numerical circle callouts, with Python Docutils if I can

Question

see: http://diveintopython.net/native_data_types/lists.html#d0e5623

I have a website with code examples on it, generated through docutils, and the CSS is always not quite right.

I would like to know if there is

• best practise CSS for displaying code (ie can it handle wrap arounds, long lines, any chance of getting colourisation)

• best practise for the little numerical callouts (see diveintopython above)

and finally, I am wondering if there is (open) CSS that is designed to work with docutils HTML output and actually look "nice". I would be happy to contribute some CSS that makes tables look "microsoft professional grey" and so forth.

Answer 1

You can't do syntax highlighting with CSS alone. You need the various parts of the code to be marked up; you can do that on the server if you are using dynamic pages, or you can use JavaScript on the client. Here is a comparison of a few JavaScript syntax highlighters.

The circled numbers are images in the site you linked, but I would use Unicode instead: ❶➋➌➍➎➏➐➑➒➓