PiXELWiT

I tried a couple different code highlighting plugins for WordPress and decided to use the aptly named “CodeHighlighter” by Wongoo Lee which is essentially an implementation of the well established and tested GeSHi – Generic Syntax Highlighter. Installation follows the usual pattern: unzip, upload to your plugins directory, and activate the plugin from your Plugin Management screen in WordPress.

Once installed, adding highlighted code to your blog is as easy as pasting your code between <pre lang=”languageame”></pre> tags. Of course you should replace “languagename” with the appropriate language for your purposes. To see which languages are supported and their exact spelling it’s probably best to go to your “plugins/codehighlighter/geshi” folder and view the available language names. If you wanted to format some HTML code your tags would look like this <pre lang=”html4strict”></pre>.

I didn’t have any luck with code highlighter plugins while using the WYSIWYG “Visual” editor as it always wanted to insert “p” tags in the worst places. Therefore I recommend using the advanced “Code” editor when putting code in a post. You can set this option in WordPress by going to Users:YourProfile and de-selecting the “Use the visual editor when writing” checkbox.

If you view the results in your blog, you should see your code rendered with all keywords colored and highlighted. If the colors aren’t exactly to your liking, you can modify them by opening your “wp-content/plugins/codehighlighter/geshi” folder and editing the PHP file that corresponds to your language of interest. The color values are generally at the end of the files but if you have any difficulty finding them you can search for the term “color:”

Now that your code is highlighted just the way you like it, you might want to further format your code to set it apart from the rest of your page content. You can do this by editing your theme’s style sheet which is usually found at “wp-content/themes/currenttheme/style.css”. You’ll want to modify the “pre” tag as you see fit. For my purposes, I used the following:

That’s about all there is to it. I’ve made a few other modifications, but that’s for a later post. 😉

Comments(4)