If you've ever thought about including code examples in your (blog/site/etc) posts and were wondering how to least frustrate your site's visitors, check out these suggestions from one of SitePoint's UX authors, James Edwards.
The majority of articles about web development include code examples, and across the web we see great variation in how they're formatted and presented. But a lot of them are not very good - because the code is badly formatted, hard to read, or can't be copied-and-pasted without unwanted junk. So in this article I'd like to take a hard look at code examples, to investigate the common problems they have, and try to establish some best practice for how they should be done.
He talks first about the whole point of including code examples in a post and five basic principles for what they should be like:
- Code examples should use good semantic markup.
- Tabs in code should not be converted to spaces.
- Code should have basic syntax highlighting.
- Code examples can have horizontal scrolling, but shouldn't have vertical scrolling.
- Code examples should have line numbers, which are not included in text selection.
There's some examples of code markup included as well as some CSS rules you can drop in to help follow his suggestions.