v3.0.90

3.0.9 was released as a patch to 3.0.83, which was meant to be 3.0.90 to follow proper semver. This release just fixes versioning.

v3.0.9

This was a security patch release which I unfortunately messed up SemVer on. This should've been 3.0.84.

3.0.83

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
• CommonJS
• Improved CSS support

Dynamic Brush Loading

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:

<script src="shCore.js" type="text/javascript"></script>
<script src="shAutoloader.js" type="text/javascript"></script>

<script type="text/javascript">
SyntaxHighlighter.autoloader(
  'js jscript javascript    /js/shBrushJScript.js',
  'applescript              /js/shBrushAppleScript.js'
);

SyntaxHighlighter.all();
</script>

Now any code blocks which use js, jscript, javascript and applescript brushes will trigger dynamic loading of the appropriate JavaScript file. Please have a look at the manual for more details.

No Flash Copy To Clipboard

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!

toolbar: {
  /**
   * Generates HTML markup for the toolbar.
   * @param {Highlighter} highlighter Highlighter instance.
   * @return {String} Returns HTML markup.
   */
  getHtml: function(highlighter)
  {
    var html = '<div class="toolbar">',
      items = sh.toolbar.items,
      list = items.list
      ;

    function defaultGetHtml(highlighter, name)
    {
      return sh.toolbar.getButtonHtml(highlighter, name, sh.config.strings[name]);
    };

    for (var i = 0; i < list.length; i++)
      html += (items[list[i]].getHtml || defaultGetHtml)(highlighter, list[i]);

    html += '</div>';

    return html;
  },
...

Wasn't that easy? Keep going!

Code Selection

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.

Block Title

You can now add titles to your code blocks by simply adding a title attribute to your <pre/> or <script/> SyntaxHighlighter tags.

Like so:

<script type="syntaxhighlighter" class="brush: js" title="This is a title, check it out!">
  $.ajax({
    url: path,
    type: 'GET',
    dataType: 'text',
    success: function(code)
    {
      var ext = path.match(/\w+$/)[0],
        name = brushes[ext],
        brush = new SyntaxHighlighter.brushes[name]()
        ;
      brush.init({ toolbar: false });
      $this.append(brush.getHtml(code));
    }
  });
</script>

CommonJS

Version 3.0 is fully CommonJS compatible.

A lot of people have tried using SyntaxHighlighter with AJAX and other "non-standard" ways that I have never originally imagined it being used in. With 3.0 release, SyntaxHighlighter can just render HTML code for you completely separately from the DOM, which means that not only it plays well with AJAX, you can use it on the server side with node.js, RingoJS, Jaxer or any other JavaScript platform.

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:

require.paths.unshift(__dirname + '/../scripts');

var sys = require('sys'),
  shSyntaxHighlighter = require('shCore').SyntaxHighlighter,
  shJScript = require('shBrushJScript').Brush,

  code = '\
    function helloWorld()\
    {\
      // this is great!\
      for(var i = 0; i <= 1; i++)\
        alert("yay");\
    }\
    ',
  brush = new shJScript()
  ;

brush.init({ toolbar: false });
sys.puts(brush.getHtml(code));

Which produces HTML output into the console.

shCore.js, 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 brush.

Improved CSS support

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:

// Django SyntaxHighlighter theme

$background                   : #0a2b1d !default;

$line_highlighted_background  : #233729 !default;
$line_highlighted_number      : white !default;

$gutter_text                  : #497958 !default;
$gutter_border_color          : #41a83e !default;

$toolbar_collapsed_a          : #96dd3b !default;
$toolbar_collapsed_a_hover    : #fff !default;
$toolbar_collapsed_background : #000 !default;

$toolbar_a                    : #fff !default;
$toolbar_a_hover              : #ffe862 !default;

$code_plain                   : #f8f8f8 !default;
$code_comments                : #336442 !default;
$code_string                  : #9df39f !default;
$code_keyword                 : #96dd3b !default;
$code_preprocessor            : #91bb9e !default;
$code_variable                : #ffaa3e !default;
$code_value                   : #f7e741 !default;
$code_functions               : #ffaa3e !default;
$code_constants               : #e0e8ff !default;
$code_color1                  : #eb939a !default;
$code_color2                  : #91bb9e !default;
$code_color3                  : #edef7d !default;

@import "_theme_template.scss";

.syntaxhighlighter {
  .comments { font-style: italic !important; }
  .keyword { font-weight: bold !important; } 
}

Further more, having file imports lets me very easily create files like shCoreDjango.css 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:

@import "shCore.scss";
@import "shThemeDjango.scss";

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!

2.1.364

• Moved indexOf() into utils.
• Fixed IE8 horizontal scrollbar.
• Removed Monaco from CSS.
• Updated Python brush.
• Pascal keywords are now case insensitive.
• Added name of the brush to all bits and main DIV.
• Added pad-line-numbers option to enable/disable/specify line padding.
• Added rb back to Ruby aliases.
• Improved getKeywords() regex pattern.
• Added Erlang support.
• Added min-height CSS lockdown.
• Added special case for <http:...> URLs which were not displaying correctly.
• Fixed multiline XML comments.
• Fixed broken < and > characters in the Bash brush.
• Fixed single quoted strings in the Bash brush.
• html-script could be now set in defaults.
• Added pas to Delphi aliases.
• Fixed prototype/jquery problem with array length.
• Updated URL matching to include more path elements.
• Fixed open quotes string matching issues in Firefox.
• Added contextual keywords 'partial' and 'yield' to C# bruch.
• Added support for @"" strings in C# brush.
• Added JavaDoc multiline comments to the Java brush.
• Added missing <%@ and <%! script tags to the Java brush.
• Removed duplicate xhtml alias from the Xml brush.
• Added ColdFusion brush.
• Added Eclipse CSS theme.