Categories
Wordpress

How to add beautiful source code to your posts in WordPress

If you have a blog on programming, computing or IT in general, you most probably have to show some code examples in your posts. Unfortunately, WordPress interprets this text as commands and tries to execute them, ruining your design and making the post unreadable.
There’s an easy fix to this behaviour.

To stop WordPress from executing the code you post, you have to change all the special symbols like ampersands,less,greater signs,etc., to HTML character codes. That is a tedious manual job, and after you do that, your readers won’t be able to just copy-paste the code into their instalations and use it. They’ll have to convert the symbols back to original. Not exactly what we wanted.
To make life easier for both parties, you have to install SyntaxHighlighter Evolved to your WordPress plugins and activate it. Browse through the plugin settings, they are rather self-explanatory.
However, it is not exactly clear how to use the plugin. Here’s how.
Add new or open existing post for editing. Be sure you’re in HTML view mode, since Visual mode will pretty much ruin it.
Now paste some code, and wrap it in &#91php&#93 &#91/php&#93 tags, save and view the post.
The plugin will create a beautiful highlighted showcase of the code you pasted.
If you want your code to be automatically wrapped and aligned, choose “Version 2.x” in th e plugin’s settings. Version 3 doesn’t support line wrap anymore.
Be sure to explore other options and arguments, it’s worth looking into.

Leave a Reply