SyntaxHighlighter Revised (again), Works On Its Own (once again)

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

Dear jQuery

I’m sorry, jQuery, but I have to kick you out. It’s not fair, I know. But then, I guess it wasn’t right for me to get you involved with SyntaxHighlighter to begin with. There are a lot of web sites out there using SyntaxHighlighter, and it’s too much to ask all of them to welcome you. Yes, I used you, plain and simple; you helped me find my way in JavaScript much more easily than I could ever have done on my own.

And I can’t say enough about how well you helped me along. It’s not as if I enjoy writing code like this:

    hDiv = highlighter.div,
    node = hDiv.firstChild,
    linesRegexp = /(^|\s)lines(\s|$)/;

// Find the 'lines' child of the div. (It should be an immediate child.)
while (node !== null && linesRegexp.exec(node.className) === null) {
    node = node.nextSibling;

when you let me express myself more clearly and concisely:

    hDiv = highlighter.div,
    linesDiv = jQuery(hDiv).find('.lines')[0];

I’ve written some new helper methods. I can’t claim that they’re as elegant or complete as yours, but they should be able to do what I need them to do. Most importantly, I’m not traversing the DOM or updating styles bare-handed; I’ve already had my fill of that.

So, yeah: my new find method doesn’t handle the full range of CSS selectors. But at least I can write:

    hDiv = highlighter.div,
    linesDiv = sh.find('.lines', hDiv)[0];

I don’t really need much more than that. Not for now, anyway.

You’re probably thinking: He’ll be back. The next time he gets hit in the face with the realities of DOM and CSS coding, he’ll come back. And you’re right. But alas, that must wait until I’ve moved on from SyntaxHighlighter. In the meantime, let’s stay in touch, OK?


Dan Breslau

Because I’ve pulled out the jQuery integrations, the new ZIP file contains just the SyntaxHighlighter code. (Previously, I’d also been including changes to the WordPress plugin.)

Before I close, I’d like to note a couple other changes:

  • The toolbar hover is now implemented in pure CSS. Not that I’m a CSS purist, but some browsers (*cough* Internet Explorer *cough*) can consume a large chunk of the CPU running JavaScript event handers, just because the mouse pointer is inside the SyntaxHighlighter area.

The CSS for this is pretty straightforward, if you leave out (as I do below) the cruft needed to make Internet Explorer understand opacity:

.syntaxhighlighter .bar
	/* Hide the toolbar until a hover event occurs */
	display: none !important;
	background: transparent !important;

/* Reveal the toolbar when a hover event occurs */
.syntaxhighlighter .lines:hover .bar,
.syntaxhighlighter.showToolbar .lines .bar 
	display: block !important;

/* Partial transparency for toolbar; used when the mouse is
    over the SyntaxHighlighter area, but not over the toolbar. */
.syntaxhighlighter .bar .toolbar
	opacity: 0.78;

/* Nearly full opacity, used when the mouse is directly
    over the toolbar. */
.syntaxhighlighter .bar:hover .toolbar
	opacity: 0.95;

  • The ruler adjusts to the longest line in the display.
So if you're like me and sometimes find that you're going on and on without coming to a good place to break the line, now the ruler will show you just how far you've gone!

The code looks for the innerText and textContent properties, neither of which is standardized. It falls back gracefully to the previously hard-coded length of 150 chars if the browser doesn’t support either property. I’ve tested with IE, FireFox, Chrome, Safari, and Opera 9, all of which support at least one of the two properties.

, , ,


  • I’ve tested the following (in Firefox 3 on Mac OS X 10.5):

    Backgrounds extend the full width of the scrolling region? Check.
    Gutter can be toggled from the toolbar? Check.
    Copying code when line numbers are hidden catches code only? Check.
    Toolbar does not appear while hovering over scrollbars? Check.
    Toolbar is translucent while hovering over code, but opaque while hovering over toolbar itself? Check.
    Gutter is fixed in place while scrolling? Check.

    Great work, Dan! It would be great to see these improvements incorporated into a future SyntaxHighlighter release.
    The only thing I noticed that is not quite correct is that the gutter overlaps the horizontal scrollbar by a pixel or two.

    • Dan Breslau says:

      Thanks for your help, David!

      I’m not sure what you’re referring to about the gutter overlapping the scrollbar. (I might be seeing it, but not recognize it for what it is.) Could you describe it a bit further, or perhaps send me a screenshot?

  • […] and for his thorough testing of each of the several iterations of this code. Dan's SyntaxHighlighter improvements are well worth a look! digg_skin = 'compact'; digg_title = 'Prototype loader for […]

  • Matt Young says:

    Very nice improvements. I hope this gets back to the Syntax Highlighter library itself.

    You should use instead of captcha. It eliminates spam for you without annoying your user with answering captcha.

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>