code

I've been running this site for about 18 years now and the code I post has been in much the same format since it was started. The code is rendered onto the page using a <code> element and (mostly) syntax highlighted using a JavaScript plugin.

I make use of sites like Codepen and JSFiddle quite a bit, and often link to those sites to show examples of the code in use. Those sites got me thinking about the static nature of the code examples on this site. I have been writing more front end code recently, but static code examples aren't the best way of showing these features in action. I can (and have) uploaded images and gifs of the feature in action, but those images are many times the size of the code examples in question and serve only to bloat the page.

What I would really like to do is allow active code examples, or a code sandbox, to be injected into the page. This would allow users to interact with code examples rather than them just being static. A valuable learning tool for any site.

Wordpress is a pretty neat blogging platform, but it falls over quite spectacularly when trying to write code in posts. I write a lot of code for #! code and so I have understand what needs to be encoded to make code examples work.

For code example on #! code I use the code tag and I encode the following characters.

< into <
> into >
" into "
' into '

Note: You must be in HTML mode in your Wordpress editor or everything will be double encoded.