7/31/2019 How To Add Google Code SyntaxHighlighter To Your Website

http://slidepdf.com/reader/full/how-to-add-google-code-syntaxhighlighter-to-your-website 1/5

Web Development Tips, Tricks and Ideas

• http://technerdia.com/885_syntaxhighlighter.html

Google SyntaxHighlighter instantly transforms code/scripts/markup (php, html,

css, java, etc) into a readable and downloadable example code.

Disclaimer:  If your Website has an active Syntax Highlighter installed on it, then you must replace 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. The

simplest is not loading more brushes than your site may use. And the funnest, is 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.

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.

7/31/2019 How To Add Google Code SyntaxHighlighter To Your Website

http://slidepdf.com/reader/full/how-to-add-google-code-syntaxhighlighter-to-your-website 2/5

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,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 (make a backup), 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 BrushesBrushes, 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.

Most Websites will use only a few of the Brushes. techNerdia for example uses these brushes: CSS,

Javascript, PHP, XML/HTML and SQL. These are the only loaded brushes, the others have beenignored.

• Open the brush files that you'll be using on your Website.

• Select all and copy the contents of one of the brush files.

• 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. Iuploaded 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.

7/31/2019 How To Add Google Code SyntaxHighlighter To Your Website

http://slidepdf.com/reader/full/how-to-add-google-code-syntaxhighlighter-to-your-website 3/5

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.

 <pre name="code" class="html"><b>It's Working!</b></pre> 

The class="html" is what tells the script which brush to load. Change it to php, js, css, etc to displaydifferent 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 thecaches 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 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.

7/31/2019 How To Add Google Code SyntaxHighlighter To Your Website

http://slidepdf.com/reader/full/how-to-add-google-code-syntaxhighlighter-to-your-website 4/5

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 until clicked.

The first example is a basic html call, the second adds the :collapse call to the class, after the brushname.

Example:

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

Wrap The Pre 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.

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 theSyntaxHighlighter 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 a little, this helpswith readability.

Example:

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

7/31/2019 How To Add Google Code SyntaxHighlighter To Your Website

http://slidepdf.com/reader/full/how-to-add-google-code-syntaxhighlighter-to-your-website 5/5

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 asneeded.

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 be sure to check your work!!!

Follow techNerdia on Google+ | Follow Chris on Google+

Subscribe to techNerdia's RSS Feed

Copyright 2012 © techNerdia - All Rights Reserved

http://techNerdia.com/