Alex Gorbatchev's SyntaxHighlighter

NOTE: This post was edited on July 30, 2010. Scroll to the bottom to see where the JavaScript code was corrected to change the <script ... /> tags to <script ... ></script> tag pairs.

Regular readers might have noticed something new in the previous article: the appearance of a cute little code display gadget that does syntax highlighting:

server1config.txt

# server1config.txt

# server options

-n server1 
-o server1\server1log.txt 
-su sql 
-x tcpip(port=55501;dobroadcast=no) 
-xf server1\server1state.txt 

# database options

server1\demo.db 
-sm secondarydemo 
-sn primarydemo 
-xp partner=(eng=server2;links=tcpip(host=localhost;port=55502;timeout=1));mode=sync;auth=dJCnj8nUx3Lijoa8;arbiter=(eng=arbiter;links=tcpip(host=localhost;port=55500;timeout=1))

Actually, I didn't care about syntax highlighting, and you don't see any color highlighting in the example above because it's using the "straight text" format. What I wanted was automatic numbering so I could refer to individual lines when explaining the tricky bits. Plus copy-and-paste that left out the line numbers and any other decorations.

OK, the truth: I was jealous of the code display gadget Glenn Paulley uses.

What I got was even better: No horizontal scrolling!

I didn't know I didn't want horizontal scrolling, Glenn had to explain why: if he posts a long code sample you have to scroll vertically to even see the horizontal scroll bar, and by the time you get down there the wide lines that extend off to the right might have already scrolled off the screen entirely. Now, you can't see how far you need to scroll horizontally.

Like I said, I didn't know I didn't want it. What I got instead of horizontal scrolling was a little green arrow that shows where line wrapping starts. To see how it really shines, make the browser window really narrow, you'll see something like this:



The gadget comes with four icons at the top right, with mouseover text reading "view source", "copy to clipboard", "print" and "?" respectively.

The "view source" icon displays the code in a popup window with scrolling instead of wrapping:



The "copy to clipboard" icon does exactly that, with confirmation:



The "print" icon does a nice job, with lines numbered and wrapped to fit the page:



The "?" produces a "Help - About" window with a link to the docs:



Another thing to like about SyntaxHighlighter: its robustness. I certainly didn't expect it to work on the 141K 4491-line DDL script produced by the SQL Anywhere Version 11 dbunload.exe utility when run against the demo database.

But work it did... eventually... after I pressed Continue on this dialog box and let it finish:



Here's the proof, a snapshot from a test using blogger:

---

Here's how to use SyntaxHighlighter in your web page or blog:

1. Paste the setup code ahead of the </HEAD> tag in your HTML or page template; for contexts other than blogger, remove the line "SyntaxHighlighter.config.bloggerMode = true;":

<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPlain.js' type='text/javascript'></script>
<script type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf';
   SyntaxHighlighter.all();
</script> 

NOTE: On July 30, 2010 the code above was corrected to change the <script ... /> tags to <script ... ></script> tag pairs.

2: Use the <PRE> tag to display your code using whatever syntax or "brush" you want (see the the docs for a description of the brushes and instructions about customizing the setup):

<pre>
Orginal pre tags still work.
</pre>

<pre class="brush: sql">
SELECT * FROM dummy;
</pre>

<pre class="brush: text">
Ordinary text.
</pre>

---

Enhancements? Here's a couple of low priority nice-to-haves, just quibbles in my opinion:

1. Optional vertical scrolling with a setting for how many lines to display. If that was provided, then horizontal-scrolling-as-an-option might also be of interest.

2. Better logic for the "sql" brush. Personally I don't care about color highlighting at all, but some people do, and the SQL highlighting is rather, um, less than perfect.

The funny thing is, the docs say this about the plain text brush: "Maybe somebody will need it :)" In actual fact, it's the only brush I need, and it's by far the fastest for rendering: no waiting at all to see all 4491 lines of reload.sql when I use <pre class="brush: text">.



If you use Alex Gorbatchev's Syntax Highlighter on your own blog or website, make a donation... I did!