Victor’s Programming Aid

You may have noticed the fancing code snippets that accompany many of the tutorials on this website! I would love to say I developed this myself, but the truth is that this is a free resource free for anybody to download and use. It is called SyntaxHighlighter and can be found at http://code.google.com/p/syntaxhighlighter/.

What is Included?

So what does the Syntax Highlighter come with? Below is a list my favorite features of this software:

1. It’s completely free!
2. Associate keywords for supported languages are highlighted.
3. Each line of code is numbered and colored for easier reading!
4. Allows one click to code only view.
5. Allows one click copy to clipboard of code.
6. Allows one click copy to printer.

What Comes With the Download

The file can be downloaded from their official website at http://code.google.com/p/syntaxhighlighter/ as a rar compressed file. Inside the compressed file, you will find various folders and files. The core files that are required include:

1. clipboard.swf
2. shCore.js
3. SyntaxHighlighter.css

Still, there are many more JavaScript files that have been included in the download. Not all of these files are required. Instead, you choose additional optional JavaScript files for the programming or scripting languages you want the Syntax Highlighter to associate.

Installation After Uploading Files

After you have uploaded the required and accompanying optional files, you will need to include the javascript and css files to the header of the pages with which you plan on using the Syntax Highlighter. See the example below:

<link type="text/css" rel="stylesheet" href="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script language="javascript">
  window.onload = function () {
    dp.SyntaxHighlighter.ClipboardSwf = 'http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
  }
</script>

In the above, there Line 1 includes the CSS file. Next, Line 2 includes the one core JavaScript file. Lines 4 through 8 include optional JavaScript files. Lines 9 through 14 include setup for using Syntax Highlighter. The portion requires including the clipboard.swf file.

Usage

I assume you already have formatted code contained within the pre tags, as found in a previous tutorial called 3 Steps to Posting Sample Code on your Website. As of now, all you have is a formatted tag, without the fancy upgrades. All you need to add for fancy code formatting is to add name=”code” class=”html”. Exchange html with the type of file you have included. Click to see sample supported files: http://code.google.com/p/syntaxhighlighter/wiki/Languages. An example:

<pre name="code" class="html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Victor's Programming Aid&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;This is a test&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

Conclusion

With that, you now have fancy code formatting on your website. Comment on some examples of where you have used the Syntax Highlighter in action!

The situation begins with your blog or website and you need to post some code on a particular webpage. In this tutorial, we will assume you want to post some basic HTML sample code (though this method will work with any programming or scripting language) that contains a hierarchy code structure.

Step 1: The Actual Code
You probably already have the first step, and that is obtaining the code you want to display on your website or blog. For this example, we will use the below:

<html>
  <head>
    <title>Victor's Programming Aid</title>
  </head>
  <body>
    <p>This is a test</p>
  </body>
</html>

Step 2: Code Manipulation
The next important step is to convert special characters to their associated HTML representations. Common examples of this are the greater than (>) and less than (<) symbols often used to distinguish tags. A ‘>’ symbol should be represented as ‘&gt;’ and a ‘<’ symbol is represented as ‘&lt;’. If you code with the actual symbol, the tags will be evaluated and therefore not display properly. The example below is what our example looks like with special symbols replaced with their associated html names.

<html>
  <head>
    <title>Victor's Programming Aid</title>
  </head>
  <body>
    <p>This is a test</p>
  </body>
</html>

Step 3: Code Formatting
However, if you just post the above code in your HTML while preserving the spaces and carriage returns (line breaks), you will discover the formatting is not properly displayed. In my experience, I find that using the HTML <pre></pre> tag is the best way to achieve the end goal. The text within the<pre> tag simply displays text pre-formatted. This means that formatting such as spaces and carriage returns are preserved. The example:

<pre>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Victor's Programming Aid&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;This is a test&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

Success!
Now, your code will be properly formatted with the correct characters and symbols as well as correctly spaced. Happy coding! Let’s see some examples of this in action!

The Web Developer designed for Firefox, Flock and Seamonkey is a free extension that adds a menu and a toolbar. It will run on any platform that these browsers support including Windows, Mac OS X and Linux. Just to list a few features:

• Disable Javascript
• Disable Referrer
• Disable Cookies
• Add Cookies
• View Cookie Information
• Disable Styles
• Edit Styles (on the fly)
• Display Form Details
• Show Passwords
• Make Form Fields Editable
• Disable Images
• Edit HTML (on the fly)
• Resize Window
• Various Validation
• View Generated Source
• Many other features…

Most of the features are useful for testing various browser compatibilities. Not all users will enable cookies, referrers, images, or javascript on their browser. The Web Developer plugin allows an easy way to test how your site will handle various situations. Most useful if Edit CSS and Edit HTML will bring up windows that allow changes and saves that will update on the fly. This plugin displays as a FireFox toolbar and (like most Firefox plugins) has no problems during the uninstall process.

Overall, Web Developer is a great tool for developing sites in HTML and CSS. It is also a useful tool when developing AJAX enabled sites, as you can view the generated source. To try Web Developer, visit the developer’s site directly at http://chrispederick.com/work/web-developer/ or from Firefox Extensions at https://addons.mozilla.org/en-US/firefox/addon/60.