beautyOfCode – jQuery plugin for Syntax Highlighter 2.0 by Alex Gorbatchev

One of my most-visited posts is the jQuery plugin “beautyOfCode” for the version 1.5 of Alex’ Syntax Highlighter. The main point of doing a wrapper was, that version 1.5 did require invalid html code.

In the new version of Syntax Highlighter this is fixed. But still, people ask for a new version of my code, too.

I finally released a new version with some more features:

• Uses online hosting of styles, scripts and brushes. This means you only need to reference jQuery and beautyOfCode!
• Supports the new features as smart-tab, html-script, themes, line-wrapping and much more
• Still uses a code-tag inside a pre-tag as well as a more css-like configuration with classes instead of property syntaxes

Referencing  the plugin and configuring brushes

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.beautyOfCode.js"></script>

<script type="text/javascript">
    $.beautyOfCode.init({
      brushes: ['Xml', 'JScript', 'CSharp', 'Plain', 'Php']
    }); 
</script>

Detection, default behaviour

By default, beautyOfCode will beautify all elements matching ‘pre.code:has(code[class])”:

<pre class="code">
  <code class="javasript">
    alert("Hello, World!");
  </code>
</pre>

Explicit

If auto detection is not desired, the plugin has to be initialized differently:

<script type="text/javascript">
    $.beautyOfCode.init({
      brushes: ['Xml', 'JScript'],
      ready: function() {
        $('#mycode').beautify('javascript');
      }
    }); 
</script>

This would then only beautify following code:

<pre id="mycode">
  <code>
    alert("Hello, World!");
  </code>
</pre>

Initialization Options

These are the default options, which can be overridden by $.jQuery.beautyOfCode.init:

settings: {
    // should the syntax highlighter and brushes
    // be loaded dynamically
    autoLoad: true,
    
    // the base url to alex' hosted sources
    // http://alexgorbatchev.com/wiki/SyntaxHighlighter:Hosting
    baseUrl: 'http://alexgorbatchev.com/pub/sh/2.0.320/',
    
    // the baseurl for the hosted scripts
    scripts: 'scripts/',
    
    // the baseurl for the hosted styles
    styles: 'styles/',
    
    // themes from http://alexgorbatchev.com/wiki/SyntaxHighlighter:Themes
    theme: 'Default',
    
    // the brushes that should be loaded - case sensitive!
    // http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes
    brushes: ['Xml', 'JScript', 'CSharp', 'Plain'],
    
    // overrides for configurations and defaults
    // http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration
    config: {},
    defaults: {},
    
    // function to be called, when all scripts are loaded
    ready: function() {
        jQuery.beautyOfCode.beautifyAll();
    }
}

Example with current version, Django-theme and no gutter

<script type="text/javascript">
    $.beautyOfCode.init({
        theme: 'Django',
        baseUrl: 'http://alexgorbatchev.com/pub/sh/current/'
        defaults: { gutter: false },
        brushes: ['Xml', 'JScript']
    }); 
</script>

Options

Find a reference for all options on SyntaxHighlighter Configuration.

The options can either be specified as defaults in init, on the beautify-call or as css classes.

Specify options in code:

$('#myCode').beautify('javascript', {'wrap-lines':true, 'first-line:2'});

Specify options in html:

In this case the gutter would not be shown and the lines 3 and 6 (5 and 8 in Listing) would be highlighted.

<pre class="code">
  <code class="javasript boc-no-gutter boc-highlight&#91;3,6&#93;">
    alert("Hello, World!");
    
    function x() {
        if (true)
            x();
    }    
  </code>
</pre>

Syntax for options in html:

• The flags smart-tabs, ruler, gutter, toolbar, collapse, auto-links, wrap-lines and html-script mean true, then prefixed with boc-, and false, when prefixed with boc-no-.
• class-name, first-line and tab-size are prefixed with boc- and followed by their values in square brackets. For example first-line[3] means, the gutter starts with a three.
• highlight is also prefixed with a boc- and followed by a comma-separated list of line numbers in square brackets that are to be highlighted.

Sources

Find the plugin source code and a demo page on the bitbucked beautyOfCode project page. If you like the plugin, please also vote on the jQuey plugin site.

Feel free to submit issues and patches. The code is not very well tested, since I don’t use it in any production environment today.