Displaying Syntax Highlighted Code in Wordpress· 2 minute read
It is difficult to use both the TinyMCE WYSIWYG and post formatted code. TinyMCE will attempt to cleanup your HTML and it will therefore remove any tags it does not recognise so your XML code will be hacked up. To compound the problem further Wordpress has annoying habit of removing all your carefully laid out indentation and line breaks.
There are many solutions to the problem out there including plugins that use BBCode to wrap the posted code up in. Use of special pre tags and code to stop code between pre tags from being changed. All of these are bandaid fixes and not a clean way of approaching the problem.
Should you need to move to a new publish platform in the future then all the extra code and hacks that were executed across your post so that it could display properly will leave you with a mangled code sample in the database. I much prefer another technique, which is to section your code away into a separate input and storage mechanism. Handily there is already plugin available that allows you store a snippet of any kind and then call it into your post at the appropriate location using a short BBCode tag. It is called Sniplets.
If you want you code to be highlighted in the same way as mine then it will take some hacking to get the googleSyntaxHighlighter to work with Sniplets. Handily however Sniplets does include a module system where you can add new ways of manipulating data contained in Sniplets. The process is quite simple so I will leave it up to you to decide how you want to implement it. Sniplets does include a copy of Geshi as its default syntax highlighter, which is more than capable should you not wish to integrate the googleSyntaxHighlighter.