Symphony.

I really like the XML syntax highlighting being used on this site, so I took a look at the JavaScript and realized that it was created by Scott Hughes and released as open source, MIT Licence. So, I’ve created a tutorial for implementing it. I just wanted to give proper attribution for the code, Scott. Should I be linking to anywhere in particular for the code source?

I only added this to my site on Friday, so nice one for spotting it so soon! It’s a good piece of code, only it just covers XML-based snippets. I’m on the lookout for a good all-rounder to cover CSS, JavaScript and PHP examples too.

As a thought — you could package the ninja-XSL into an XSLT Utility and link out to the required JS file. It’d be great for the XSLT Utility area to become the central repository for all things XSL.

Hey, Nick, if you find something that works as an all-round syntax highlighter, let me know. I’ll be pulling in some JavaScript, ActionScript and PHP code, so I’ll be needing a solution soon.

What were you thinking for the ninja-XSL? It does already exist as the HTML Manipulation utility. Were you thinking I should include my minor additions?

This one looked promising:

• SHJS - Syntax Highlighting in JavaScript

If you’re using Mootools have a search for Lighter.js.

Nice work, bauhouse! It’s great to know that others can put my script to use.

I’ve just updated it to be more tolerant of random input, valid XML or not, and fixed that pesky error where it incorrectly highlights opening tags with attributes. If you’re using this on a site where public visitors can post code that gets highlighted, I strongly urge you to update to the newest version, since it fixes a security vulnerability. (You could previously craft malicious code that ends up writing a <script> element. Now, there’s no way it will output HTML containing any elements besides <span>s.)

Also, here’s some info which might come in handy:

• The script doesn’t use jQuery internally, so if you wanted, you could replace jQuery(function() {...}); with onload = function() {...}; or include the script tag below your <pre> blocks and use (function() {...})();.
• You can use it on elements besides <pre>s by changing line 23 as needed, e.g. document.querySelectorAll('pre code') or jQuery('pre.language-xml'). It’s safe to remove or modify the if block on lines 34-37 – this is really just a crude method to test for XML within these forums.
• If you’re running the script over large chunks of XML, or while the browser is busy doing other things, it might be a good idea to increase the duration of its pauses (lines 66 and 72).

P.S. It’s already included in a private github repo – the one for this forum – which I’m pretty sure is going to be made available as an ensemble in the near future.

Thanks for the script, Scott! And for the updated code. I’ve posted the patched version on the tutorial.

I hope you’re right about the impending release of the Symphony forum ensemble. That would be fantastic!

Has anyone had any luck getting syntax highlighting to work backend? I’ve made a textarea extension for JavaScript storage, and am wondering how hard it would be to highlight syntax on the textarea, as users input code.

I use Google’s Prettify script, which you can see in action on such embarrassing and aged blog posts as this one. It just took a little customising of the colours to make it look nice-ish.