So I have been using images for all my code examples. While they are great, it is a pain in the ass to create for each resolution level. Mind you, I have not created different sized images, but I wanted something that would be as easy as text, but show up well all around. That’s when I started playing with google-code-prettify.
This is the same code styling that Stack Over flow uses and is hosted by google. It’s pretty awesome, because it is literally as easy as adding a few css and js files and off we go. Here is an example:
Then in your site’s javascript file add these few lines:
jQuery.fn.prettify = function () { this.html(prettyPrintOne(this.html())); }; $(document).ready(function () { $('.formatCode').prettify(); }
This code basically just says, where ever you see a css class of “formatCode”, make it look like code. Now lastly, you probably want to use a pre tag, as a pre tag will keep the whitespace and line delimiters, and boom, you have some awesome looking code.
HAHA that last bit of code for me was like inception. Now some of the other issues I ran into with this were that I had to escape all the html characters, but otherwise, it should format great. I’m hoping this article looks good in a rss reader, so I can just use this method, instead of images…but I’m not holding my breathe. I’ll post a follow up in the comments later to let you guys know.