Out Of What Box?

I’ve made some more changes to the SyntaxHighlighter code on this site. For brevity, I’ll only touch on the, err, highlights of the changes here. I’ll describe some of the implementation details in later posts.

Gutter can be toggled through the toolbar.

This new toolbar icon toggles the display of line numbers, in a “gutter” on the left of the main text display. In the standard SyntaxHighlighter, the choice of displaying or not displaying the gutter was statically configured within the HTML.

A little transparency can go a long way.

SyntaxHighlighter’s standard toolbar completely obscures the text underneath. I felt that this was a little too disruptive to the user, especially since displaying that text is SyntaxHighlighter’s main purpose. I’ve adjusted the toolbar so that it starts out partially transparent; after a moment it turns mostly opaque. The underlying text isn’t readable, but that’s not the point. Just by being visible at all, it gives the user a subtle signal that content still exists behind the toolbar. (At least, that’s the idea. I’d really like to know what other folks think about it.)

Here’s a SyntaxHighlighter box with a live toolbar, so you can try out this change. Let your mouse hover over this snippet for a moment:

And you may marvel why I obscured myself,
Labouring to save his life, and would not rather
Make rash remonstrance of my hidden power

Toolbar remains inactive when scrolling.

The standard SyntaxHighlighter toolbar is meant to be activated when the mouse moves into the text display. However, it’s also activated by merely mousing over or using the scrollbars. I found that to be a bit of a distraction. The toolbar on this site is now activated only when the mouse moves into the main text display.

Gutter is fixed (in place.)

If you’re displaying line numbers in the gutter, the gutter remains fixed in place as you scroll horizontally (assuming that you have a scrollbar to begin with!) Here’s an example:

 Has had most favourable and happy speed:
 Tempests themselves,  high seas,  and howling winds,
 The gutter'd rocks and congregated sands --
 Traitors ensteep'd to clog the guiltless keel, --
 As having sense of beauty,  do omit
 Their mortal natures,  letting go safely by
 The divine Desdemona.

Under the hood

I’ve cleaned up the code a bit, mostly within the changes I’d made in the last round.

In particular, my last post described how I’d gone to some lengths to get the right line lengths, without which I couldn’t make the background look right. But the resulting code seemed somewhat fragile, even smelly. On further review, I realized that I could eliminate all the mumbo-jumbo that calculated the widths of margins, padding, and borders. It’s been replaced with simpler mumbo-jumbo calculations based on the scrollWidth of the container and the offsetWidth of the text lines.

But I promised not to discuss implementation in this post, so that’s all I’m sayin’ for now.