wordpress code syntax highlight

Posting code and syntax highlighting on a WordPress site

I’ve been setting up WordPress based websites for years and yet I learn something new every day. So while setting up this blog, it occurred to me that  I would probably share code snippets at some point. WordPress has an inbuilt feature to display code which looks like:

while (true)
   echo "Hello World";

But this is so early noughties and with syntax highlighting available even on vi why not blogs?  So exercising my well honed web search skills I tapped in to the collective wisdom of the interwebs. Lo and behold, I didn’t find anything substantive at the first try. I came across a few links to Posting Source Code but this is only applicable to WordPress.com sites. Searching for plugins also turned up a smattering of low rated plugins or with very few users which always makes me nervous.

Finally I stumbled across the Syntax Highlighter Evolved plugin. But before I go in to the details of this plugin, I’d like to highlight why this plugin rather than the others. Asides from having a 50K+ active installs and 4.5 star rating (the Crayon Syntax Highlighter plugin also has similar stats), it is authored by employees of the parent company of WordPress, Automattic. This gives me confidence that the plugin has some longevity to it (lots of caveats here).

So let’s get to it.

1) Get the plugin

SyntaxHighlighter Evolved
You’d think this is the easy part but apparently not. Go in to your WordPress dashboard and select Plugins » Add New. In the search field type in- SyntaxHighlighter -no spaces, no shortened words. Otherwise lots of other plugins show up and some with very similar names to the one you want. WordPress needs to work on their search functionality… Once you’ve found it, go ahead, install and activate it. The settings out of the box works pretty sweet but if you want to tweak them, they are hiding under Settings » SyntaxHighlighter.

2) Tweak the settings

So this part  you can fly by or spend time customising it. The default settings are fine but you’re welcome to delve in to the details to create a unique experience for your site. The setting people will mostly likely play with is the colour theme of which there are seven to choose from.

3) Using SyntaxHighlighter

There are lots of parameters you can play with. I’ll run through the basics and highlight a few that I’ve found to be useful when reading code on other peoples blogs.

To syntax highlight code you need to wrap the code between these short codes:

  • [code lang="js"] Your code goes here [/code]
  • [sourcecode language="css"] Your code goes here [/sourcecode]
  • [php] Your code goes here [/php]

The plugin supports a large range of the most popular languages. So just wrapping the code between the short code results in the following:

if (isloggedin()) 
	echo "Hello User"; 
	echo "Hello World"; 

One of the parameters I’ve seen used frequently is to start line numbering at an arbitrary point which allows you to reference sections of code and stay synched to the original source. The second is to highlight specific lines in the code which is useful when explaining code. Here’s an example of what I’m talking about.

from django.conf.urls import url
from . import views

app_name = 'polls'
urlpatterns = [
# ex: /polls/
	url(r'^$', views.IndexView.as_view(), name='index'),
	url(r'^(?P<pk>[0-9]+)/$', views.DetailView.as_view(), name='detail'),
	url(r'^(?P<pk>[0-9]+)/results/$', views.ResultsView.as_view(), name='results'),
	url(r'^(?P<question_id>[0-9]+)/vote/$', views.vote, name='vote'),

I’ll let you explore the other parameters but these are the most interesting ones. Well there you are. A simple solution to something useful and yet we take for granted these days.

PS: Just spotted a link to this plugin at the bottom of the page for Posting Source Code in WordPress.com. So I guess RTFM…

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *