Because you don't have time to read everything.^TM

SyntaxHighlighter: Beautify Your Code On The Web

Do you ever put code samples in your web pages? If you do, they probably don't look as spiffy as they could. SyntaxHighlighter is a free tool you can use to present your code in a way that's both visually appealing and highly usable for your readers.

SyntaxHighlighter is written in JavaScript. Once it's installed, you can easily place code in your HTML markup and have it automatically formatted in any of the supported languages, which include HTML, XML, SQL, Java, JavaScript, C++, C#, and VB.

Simply wrap your code in a <pre name="code" class="[language]"></pre> tag, where [language] is a placeholder for the language your code is written in. Let's use HTML as an example. Put this code on your page:

<pre name="code" class="html">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>A Typical Web Page</title>
  </head>
  <body>
    <div id="main">
      <h1>Title Goes Here</h1>
      <div id="content">
        <p>
          Just a demonstration of the JavaScript-based SyntaxHighlighter tool.
        </p>
      </div>
    </div>
  </body>
</html>
</pre>

And this is what SyntaxHighlighter gives you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>A Typical Web Page</title>
  </head>
  <body>
    <div id="main">
      <h1>Title Goes Here</h1>
      <div id="content">
        <p>
          Just a demonstration of the JavaScript-based SyntaxHighlighter tool.
        </p>
      </div>
    </div>
  </body>
</html>

This isn't a screenshot, it's the actual SyntaxHighlighter output (notice that the links in the header work).

So here's what the SyntaxHighlighter does for us:

It displays different parts of the code in different colors, according to the syntax of the given language.
It automatically numbers the lines for reference.
It provides links at the top to facilitate copying and printing.
Because the code is in a <pre> tag, it will still be somewhat formatted as code even if the user has JavaScript turned off.

One thing to be careful of though, is that the < and > tags should be written as < and > to be safe.

They could have provided a little guidance for installation, but it's not too bad. On the SyntaxHighlighter page, download the rar file containing the code. Rar files can be unzipped with the current version of WinZip (11.1). Within the dp.SyntaxHighlighter folder, there are Scripts, Styles, and Uncompressed subfolders.

The Uncompressed folder simply contains the JavaScript files from the Scripts folder, but in a readable format—you don't need it unless you're curious about the code. Within the main folder for your website, create folders called css, js, and flash. Then copy the contents of Styles to css, copy Scripts\clipboard.swf to flash, and copy the rest of the Scripts files to js. Now you just need to include the stylesheet and script references at the bottom of your HTML file:

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

(I actually replaced the first line with an import call in the <head> section:

<style type="text/css">@import "css/SyntaxHighlighter.css";</style>

After the initial setup, it's very easy to make your code samples look their best in all of your web pages. Happy coding!

WebGirl36

Posted 11/16/2007

Home

Submit Content

Advertise FREE

All Posts

About Us

Give Feedback

Privacy Policy

Stumble it! Email

Email to a friend