Skip to content

3.0.83
Compare
Choose a tag to compare
@alexgorbatchev alexgorbatchev released this 06 Feb 04:24
· 376 commits to master since this release
3.0.83
682bf8c

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!

Assets 2