The AL2 Blog

February 24, 2010

Code Highlighting in WordPress

Want to know how to highlight programming code on your website?

A great JavaScript plugin to do this for you (and for me) is Syntax Highlighter. This is exactly how I will be demonstrating code samples on this site.

  //Here is a PHP Code Sample
  echo "This is some sample PHP code";
  echo "It is to demonstrate syntax highlighting";

Integrating into WordPress

It’s not actually any more difficult than integrating into any other site. For example, here is the code I used for the demonstration above.

	<pre class="brush: php;">
		//Here is a PHP Code Sample
		echo "This is some sample PHP code";
		echo "It is to demonstrate syntax highlighting";
	</pre>

You will also need to have included the relevant CSS files in your header. To make the magic happen, you also need to make the javascript call in the page.

// On DOM load
$(function()
{
	SyntaxHighlighter.all();
});

Easy as that!

Filed under: Development,Programming — Tags: , — Andy Long @ 6:53 pm

Powered by WordPress