Do you regularly write blog posts in Wordpress, that contains huge number of code snippets? If yes, read on and I will show you how to make them pretty and usable with the SyntaxHighlighter plugin.

Step 1 : Download the SyntaxHighlighter WP Plugin

SyntaxHighlighter is an open-source syntax highlighter written using JavaScript. You can view the detailed information on the tool and download the source code, from the SyntaxHighlighter Google Code page.

If you are a Wordpress user, then you are lucky to have a plug-in for this JavaScript tool.

Navigate to the SyntaxHighlighter Plug-in home and download it on your computer.

Step 2 : Install the SyntaxHighligher WP Plug-in

You will have to follow the regular WP Plug-in installation process. Copy all the contents of the ZIP file and upload it to the wp-content/plugins folder, on your Wordpress Installation.

Step 3 : Activate the Plug-in

Once the upload is complete, you need to activate the plug-in. To do this, Navigate to the Plugins page from your WP Dashboard and click on Activate. Make sure that you get the success message for activation

Step 4 : Start writing Code Snippets in your posts

Now, when you write code snippets in your blog posts, make sure to wrap them as:

[sourcecode language='css']

your code here

[/sourcecode]

“language” attribute is important and you can use one of the following alias values, depending on your code language.

Language Alias “language” code to be used
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
JavaScript js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
SQL sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

Step 5 : Sample Code Snippet

Following is a sample code snippet in Ruby and how it displays up using the SyntaxHighlighter Plug-in:

#GreetMe
class GreetMe
  def initialize(name)
    @name = name
  end

  def sayhello
    puts "Hello #{@name}.  How are you?"
  end
end

Formatted with SyntaxHighlighter:


#GreetMe

class GreetMe
  def initialize(name)
    @name = name
  end

  def sayhello
    puts "Hello #{@name}.  How are you?"
  end
end

Enjoy sharing your code through your Wordpress Blog!

Note: If sometimes the syntax highlighter doesn’t work after performing all the installation steps, make sure your theme’s footer has `` somewhere in it, otherwise the JavaScript highlighting files won’t be loaded.

If you enjoyed reading this, consider sharing it with others using the “Share This” button at the bottom of this post.

Subscribe to more such useful posts from Thoughts Unlimited here.

Related Posts

, , ,