SyntaxHighlighter 3.0 has quite a few new tricks up its sleeve. There are a number of new features that are worth mentioning here.
- Dynamic Brush Loading
- No Flash Copy To Clipboard
- Code Selection
- Block Title
- Improved CSS support
SyntaxHighlighter comes with almost 30 brushes out of the box. One of the most requested feature has been the ability to dynamically load them without having to load them all on the same page.
Version 3 addresses this problem with with the new autoloader script. Setting autoloader
up is as simple as adding
shAutoloader.js file to your page and telling
autoloader where your brushes are. In fact, this site is using the autoloader. Have
a look at the example below:
Now any code blocks which use
applescript brushes will
the manual for more details.
Since the first version back in 2004, SyntaxHighlighter has always used Flash to provide copy to clipboard functionality. At first it was Flash 8, then it was Flash 9 and now 10. It's never been a crowd pleaser and a lot of requests over the years demanded Flash to be removed.
Well, it's finally happening -- no more Flash. I think I've came up with user interface to copy code to clipboard which is a lot more intuitive and almost too easy.
If you double click anywhere on the code, the entire code view is replaces with a pre-selected view from which users can copy with a simple Ctrl/Cmd-C. Clicking anywhere else returns the view to the original state.
Give it a try!
Wasn't that easy? Keep going!
Another popular request has been ability to select the code without line numbers. This is also now part of the SyntaxHighlighter as it allows you to select the code with your mouse and then copy and paste it without straight into your code without any additional effort.
You can now add titles to your code blocks by simply adding a
<pre /> or
<script /> SyntaxHighlighter tags.
Will render like so:
It also works especially well if you want to collapse your examples:
Version 3.0 is fully CommonJS compatible.
For example, have a look at the
node.js file in the demo folder. This file is meant
to be executed with node.js and it looks like this:
Which produces HTML output into the console.
XRegExp.js and all
shBrush...js were updated
to do proper CommonJS export and dependency requirement with just a few lines of code which
doesn't affect execution in the browser. Included in the
tests folder there is
a file called
commonjs_tests.js which when ran with node.js will test every bundled
All CSS source files have been ported to the new SASS 3.0, which allows one to create new themes with ease (providing they have Ruby installed). Of course, if you wish you can still operate with "old school" CSS.
What does this mean? Well, for one, a theme in its source code now looks more like a configuration file rather than a convoluted set of CSS. For example, have a look at Django theme source:
Further more, having file imports lets me very easily create files like
which merges main CSS and theme declaration into single file to speed up the page loading.
This is done through the magic that SASS is, for example
shCodeDjango.scss file is
just two lines:
SASS 3.0 together with Compass is pure CSS heaven. Even if you don't use SyntaxHighlighter, I strongly encourage you to have a look at these tools. They can turn your CSS development from right side up!