Innovations in High Performance Computing

How to add syntax highligter to WordPress


#include <iostream> 
using namespace std; 

int main(int argc, char *argv[])
    cout<<"hello good old C++ world!"<<endl; 

This is a short tutorial about how to enable code color syntax highlighting in wordpress.  I did a quick search for syntax highlighter options in word press. There are two kinds of syntax highlighters

a. Runs on server using PHP and generates your syntax html code with colour.

b. The code snipped is sent to browser with some instructions and a syntax highlighter java script. Browser running on clients computer uses java-script and modifies your page HTML Dom, adds syntax highlighter html tags.

First step we need to install a “Code Syntax Highlighter Plug-in” in word press. This can be done by visiting your wordpress configuration page, for ex if your wordpress website is foo.com, then visiting this link “http://foo.com/wp-admin” will open the administration login.

Once logged in, click on the “Plugins” left side bar item.  On the install plug-in page there are many syntax highlighter plug-ins. After reading information about some plug-ins I liked Crayon Syntax Highlighter most. Though I didn’t try most of the highly rated feature rich syntax highlighters, I think there might be another syntax highlighter more suitable to your requirements. A point worth noting is that most of the plugins use Googles Alex Gorbachevs java-script plug-in. Thumbs up Alex Gorbachev or who ever developed this java-script, excellent work. Any ways moving on, I selected Cryon, installed on my wordpress admin screen. Clicked on the plugin settings and played around a bit. Except for theme and default language i didn’t like to tamper with default settings which seemed to me as quite nice.

Under “Posts” select Add New. This opens an editor. Locate the syntax highlighter icon [ <> ]. Click on it, it pops up a nice dashboard to play with code .. 😀

Leave a Reply

Required fields are marked *.