More SyntaxHighlighter Updates

The latest posted version of SyntaxHighlighter is here. For the change history, or to download older versions from this site, see the downloads page.

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.

icon for toggling line number displaysThis 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.

In the standard SyntaxHighlighter, line numbers are included in the HTML DOM even if they’re not being displayed. As a result, copying text from a SyntaxHighlighter box into the clipboard brings the line numbers along for the ride. I’d previously modified my version of SyntaxHighlighter to include line numbers in the DOM only when they’re to be displayed.

With these two sets of changes, text can be copied simply by turning the line numbers off through the toolbar (if need be), then performing the usual copy operation. This may mean that the Flash-based method for copying the code to the clipboard is no longer needed, but I haven’t removed it.

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.

Update: Over at the SyntaxHighlighter forums, Rithiur informed me that the ZIP file I’d placed on the site for download had nonstandard configuration values. That was due to an error on my part, of course; my apologies go to anyone inconvenienced by the oversight.

At the same time, I was testing a new version of SyntaxHighlighter using updates from Rithiur that further improve the copy/paste functionality. The current ZIP file should have the original default configuration, as well as Rithiur’s updates.

, , ,

One Comment

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>