Chris Wiegman

Add Code To Your WordPress Posts With Crayon Syntax Highlighter

Blogging Web Development WordPress
{{0xc0015e04b0 0xc0015e04b0 /images/2012/05/Crayon-Syntax-Highlighter.jpg Crayon Syntax Highlighter Crayon Syntax Highlighter 0xc001544f00} 0 true}

If you write any tutorials in WordPress that require adding source code you need to make sure that code is easy to read and easy to copy by your readers. While there are a number of plugins that can highlight code for you there is only one that really stands out, Crayon Syntax Highlighter.

Getting code into your tutorials in an easy to read, usable fashion is a challenge for any tech blogger. I don’t know how many times I’ve looked for code snippets on Google and thought I found what I needed only to go somewhere else when the site I arrived at slopped their code into their sites like any other piece of text. In some of the worst cases folks don’t even bother to watch the automatic cleanup done by their content management system and their code winds being distorted beyond use by a content filter that didn’t like the input.

{{0xc0015e04b0 0xc0015e04b0 /images/2012/05/crayon-syntax-highlighter-example-150x150-1.png Crayon Syntax Highlighter really does produce incredible output Crayon Syntax Highlighter really does produce incredible output Crayon Syntax Highlighter really does produce incredible output 0xc002296f00} 1 true}
Crayon Syntax Highlighter really does produce incredible output

Then there are the sites that use a syntax highlighter, but the highlighter they use makes copying the copy for reuse an exercise in itself. You know what I’m talking about. These are the code samples that look real nice but when copied leave you to take out line numbers yourself or require you to paste the code in a text editor to remove extra formatting before you paste the code in your IDE.

Fortunately there is a good solution. Crayon Syntax Highlighter by Aram Kocharyan uses Ajax to beautifully highlight your code making it readable by your users, usable by those who need it, and best of all for you, easy to put it all together. While the competition requires you to enclose your code manually in <pre> tags or shortcodes Crayon Syntax Highlighter gives you the option of it’s own little editor in your WordPress WYSIWYG editor making code input a breeze (you can still use manual tags if you want but who wants to do that?).

For your users Crayon Syntax Highlighter creates beautiful output in any number of templates which you can change or create your own. In addition it gives your users the option to interact with your code by copying it directly to the clipboard, view it in a text editor view, remove the syntax formatting, and more. Of all the syntax highlighters I’ve used (and there have been a few over the years) Crayon is the only one I’ve found to actually make it easy for both me and my users, a fact that has kept it a valuable part of my toolbox since the launch of Bit51.com.

Still not convinced? Check out a couple of examples:

Ready to improve your code tutorials?

← →