Pretty Code
Aug 31, 2006
I’ve been meaning to post some code, mostly for my own reference and mostly relating to WordPress, but wanted first to edit my css to make my code look pretty. In particular, I’ve noticed that an increasing number of people are able to give their code line numbers without additional markup. You can see an example at Miha Hribar‘s site.
It’s a beautiful effect, because it makes the code so much easier to digest. I’ve also noticed that people whose code is line-numbered generally have code that is better spaced and whose font-family isn’t painfully ugly. I understand that the use of monospace is to set the code apart from the surrounding text, but I feel that this line-numbering goodness does that just as well, if not better.
So. Having stolen the time from work I should be doing, I delved into some stylesheets and discovered that these line numbers are actually background images. It’s a smooth trick, but unfortunately it doesn’t satisfy the perfectionist within. The issues that immediately spring to mind include the necessity for a potentially ginormous (in terms of dimension) image as well as the inability for the numbers to expand to fit the text when readers increase the font-size.
I guess JavaScript could fix this. Also those funky CSS3 thingamabobs that I haven’t even begun to study.
And did I mention that I’m dead tired now and should be asleep?
No?
Well, good night.
One Response to “Pretty Code”
1 Miha Hribar Aug 31, 2006
Well, my implementation is well, cheating, I know. But it was the quickest way of accomplishing the desired effect. The best implementation for this I’ve seen is implemented on 456bereastreet.com. Roger uses an approach that is actually quite semantic in its nature – orderedlist. Come to think of it, what else are those lines of code but well, numbered lines. Styling and coding can become a bit of a problem. It’s tedious work, making a list element from each line of code, not to mention the indentation, wich Roger solved by introducing tab classes. After thinking it through I decided to go with the simple lazy pre element and just copy pasting my code :)