Disclaimer: If your Website has an active Syntax Highlighter installed on it, then you must replace the old Syntax Highlighter wraps with the style used by the Google SyntaxHighlighter. Otherwise your code examples will break.

Keep Current Syntax Highlighter Plugins / Scripts Active Until All Old Examples Have Been Replaced!

Why use the Google SyntaxHighlighter?

Because it’s pretty dang good! Of course, having the source code has massive advantages too. Also, not loading more brushes than your site may use, along with the ability to customize the look to your desires.

The SyntaxHighlighter currently Supports: C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, Sql, VB, and XML/HTML markup and code types. [ source ]

How Does The Google SyntaxHighlighter Work?

It uses Javascript to find the HTML Pre tag and parse the ‘code’ data within it. The Pre tag contains the type of code being displayed, allowing a filter to be called that translates the code or markup to readable text within the browser rather than rendering it with the Webpage markup.

Example Pre Tag:

<pre name="code" class="html">/* html markup here */</pre>

Adding the SyntaxHighlighter to your WordPress Blog

First, download the SyntaxHighlighter rar file from Google Code. After you unRAR (7zip) the file, finally open the dp.SyntaxHighlighter directory.

Within the directory will be three sub-folders:

• Scripts: Core code and brush script files.
• Styles: The core CSS file.
• Uncompressed: Ignore

Let’s Get Started…

The CSS File

• Enter the Styles directory, open the SyntaxHighlighter.css file, select all and copy the entire file.
• Open your themes style.css file, paste the SyntaxHighlighter css data into your themes css file. I put this at the bottom of my css files, below the mobile goodies, sprites, etc.
• Save the file and upload it to your WordPress theme directory.

The Core

• Go back and into the Scripts directory.
• Find the shCore.js file and right click the file and rename it to: SyntaxHighlighter.js
• Open the file in Notepad or Notepad2 (what I use) or Notepad+
• Leave the file open….

The Brushes
Brushes, is a term (or name) used to identify the highlighter script for a type of code or script being displayed.

For example, within the Scripts folder is shBrushCSS.js – This file would be called when displaying a CSS file within the ‘pre’ tag.

• View All Possible Code Languages That Can Be Called.

Most Websites will use only a few Brushes. techNerdia for example uses these brushes: CSS, Javascript, PHP, XML/HTML and SQL. These are the only loaded brushes, the others have been ignored.

• Open the brush files that you’ll be using on your Website.
• Select all and copy the contents of one of the brush file.
• Return to the already opened SyntaxHighlighter.js file, scroll to the very bottom (last line) and paste the Brush code in.
• Repeat this for each Brush type that you’ll be using.
• Save the file when done. Uplaod the SyntaxHighlighter.js file to your Website/Server. I uploaded mine to domain.com/js/

Note: The Scripts directory contains a flash file named clipboard.swf. I could not get this feature working, so I’ve excluded it.

Turning on the SyntaxHighlighter

With the CSS data and SyntaxHighlighter.js files uploaded, it’s time to activate the highlighter.

** Do Not Disable Other highlighter Plugins Yet!!!

• Open your themes footer.php file, scroll to the bottom and find wp_footer().
• Paste the snip below, above the wp_footer() line and above your Google Analytics code, if it’s in the footer.
• Adjust the URL to the SyntaxHighlighter.js file, save the file, and upload to your theme or /js directory.

<?php if( is_singular() ){
<script language="javascript" src="http://domain.com/js/SyntaxHighlighter.js"></script>
<script language="javascript">
	dp.SyntaxHighlighter.HighlightAll('code');
</script>
} ?>

Test the SyntaxHighlighter

Easy enough….

• Go into your WordPress Admin and CLEAR THE CACHE!
• Create a new post, add the snip below to the body of the post, save the post as a draft, and preview it.

It's Working!

The class=”html” is what tells the script which brush to load. Change it to php, js, css, etc to display different code/markup types.

If something isn’t working, then a step is missing: Check the URL to the SyntaxHighlighter.js file, check that the Brushes have been added to the bottom of the file. Make sure the CSS data has been uploaded or added to your root css file. Ensure the footer call is above the wp_footer() line. Clear the caches again. Try a different brush. Try a different browser.

Removing What Isn’t Used

It’s time to find and replace a few things… with SyntaxHighlighter.js file open:

• Do a find for: copy to clipboard
• Remove the copy to clipboard words only.
• Do a find for: print it will be within a label, like: label:’print’
• Remove the word print only.

The last removal is optional, it’s the question mark ? that contains the about information. If you remove this, you should give credit some place…. like making a blog post about the SyntaxHighlighter.

• To remove, do a find for: label:’?’
• Remove the question mark ? only.

• Save your work, re-upload the file and retest.

Customizing the Look of the SyntaxHighlighter

The Pre tag wrapper for the code has one customization that can be added to it. It’s a :collapse feature, which closes the code example when the page is loaded, and opening when clicked.

Example:

<pre name="code" class="html:collapse">/* html markup here */</pre>

Wrap the Pre Tag Within a Class

This isn’t mandatory to get the code working, but it does help if for some reason the JavaScript brushes do not load, and it makes the code display.

Add a class called ‘mycode’ around the Pre tag of your code, then define it within your themes CSS file.

Example:

<div class="mycode"><pre name="code" class="html">/* the sample */</pre></div>

mycode Class:

.mycode {
	border-bottom:1px dotted #aaaaaa;
	color:#006400;
	font-size:11px;
	line-height:16px;
	margin: -5px 0 20px 0;
	padding:0;
}

The Main CSS File

If the visual display of the code does not match design, then open the CSS file that contains the SyntaxHighlighter CSS data.

The main wrapper: .dp-highlighter
Adjust the background color, typically this color should be different than your body color of your page, to help the code example stand out.

You may also want to add a line-height, larger than 12px and increase the padding around each line, this helps with readability.

Example:

line-height:22px;
padding:10px 0;

Complete:

.dp-highlighter {
	background:#ffffff;
	background-color:#ffffff;
	font-family:"Consolas", "Courier New", Courier, mono, serif;
	font-size:12px;
	line-height:22px;
	margin:18px 0 18px 0 !important;
	overflow:auto;
	padding:10px 0;
	width:99%;
}

Rounded corners: Add the CSS below to the .dp-highlighter class.

.dp-highlighter { -moz-border-radius: 9px; -webkit-border-radius: 9px; -khtml-border-radius: 9px; border-radius: 9px; }

Color Changes: If you’ve adjusted the background color, you’ll probably want to adjust the other color settings. Do a find for the classes below, and adjust the color or background color setting.

.dp-highlighter ol /* base number colors */
.dp-highlighter .columns div /* odd number colors, I think */
.dp-highlighter .columns /* even numbers */
.dp-highlighter .tools /* toolbar colors */
.dp-highlighter .tools a /* link color in toolbar */

The last bit of the CSS information controls the colors of the code within the example. Adjust as needed.

Cleanup And Disable SyntaxHighlighter Plugins

Update old posts to use the new Pre tag wrapper, then disable old Syntax Highlighter Plugins and code.

It may seem obvious, but make sure you check check your work!!!

If you've enjoyed this article then please leave me some feedback, thanks!

~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]>