There are different methods and plugins you can implement to display code on your WordPress blog or website. After much testing and frustration, I’ve come across the best code beautifier that does not require a WordPress plugin (and can be implemented on any website). This tutorial guides you through setting this code beautifier up on your website.

It is called SyntaxHighlighter. You can implement this code formatting method on any site (including your WordPress website). I like to use it with WordPress because it does not require the use of a plugin and is a simple solution. Anytime I can find an excuse to get rid of a plugin, I’m happy. 🙂

Implementing Code Beautifier: SyntaxHighlighter

As there is official documentation for installing and using this code formatter, I put together a quick how-to to get this up and running as fast as possible on your website. There were a few issues I had to figure out through this process, and I wanted to make it as easy for you as possible.

Keep in mind there are multiple themes you can implement (see themes) and it supports multiple programming languages (see programming languages). There are also multiple options that you can utilize for each piece of code (which we go through below).

Following is a quick and easy sample of how the code will look on your site (in this case PHP).

<?php
echo 'This a test!';
$testArray = array(
	'key1' => 'value1',
	'key2' => 'value2',
	'key3' => 'value3',
);

foreach($testArray as $key => $value)
{
	echo "<p>$key equals $value</p>";
}
?>

Go through the below three steps to get this working on your website.

Step #1: Download and Upload

First you will need to download the files, which you can do by clicking here. Upload all three folders (scripts, css and styles). You can put them into different directories, just make sure to use the correct path in the examples below.

Step #2: Include the required CSS and JavaScript in your website.

If you are implementing this in WordPress, the easiest method is to open up the footer.php file for the theme you are using and place the following code right before the </body> tag. You can also do this on any site outside of WordPress.

<!--These files are always required-->
<script type="text/javascript" src="/scripts/shCore.js"></script>
<link href="/styles/shCore.css" rel="stylesheet" type="text/css" />
 
<!--Include all of the programming language files you are going to use-->
<script type="text/javascript" src="/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/scripts/shBrushJScript.js"></script>
 
<!--Include the CSS them style you want to use-->
<link href="/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
 
<!--These are the default settings for all the code formatting-->
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = false;
SyntaxHighlighter.config.clipboardSwf = '/scripts/clipboard.swf';
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.all();
</script>

Step #3: Include the Code in your Posts

Now to actually include code into a WordPress post is a fairly simple process, but there is one wrinkle. You have to replace ” tag and a specific class attached to that tag. Below is a simple example in how to get the code styling to be applied to your piece of code. Simply copy and paste the code onto your site to see if it works.

<pre class="brush: php;">&lt;?php
echo 'This a test!';
$testArray = array(
	'key1' => 'value1',
	'key2' => 'value2',
	'key3' => 'value3',
);

foreach($testArray as $key => $value)
{
	echo "<p>$key equals $value</p>";
}
?></pre>

If the code does not show up formatted using the theme that you defined in step two, you most likely did not include all of the required files.

The defaults defined in step two will take effect, but if you want to add additional options to the specific piece of code you are working with, you will want to add these to the end of the class definition in the <pre> tag.

Take a look at this example with several options included in the class definition.

<pre class="brush: php; gutter: true; first-line: 10; tab-size: 4; wrap-lines: true;">&lt;?php
echo 'This a test!';
?></pre>

Here is how the above code will look in the browser…

<?php
echo 'This a test!';
?>

You can see all available options by clicking here.

That’s it! Now you can easily post code samples or tutorials on your site in a way that is easy to implement and looks fantastic.

Post in the comments if you have trouble implementing this into your website, or if you have any questions.