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.

Advertisements

51 thoughts on “beautyOfCode – jQuery plugin for Syntax Highlighter 2.0 by Alex Gorbatchev

  1. Pingback: beautyOfCode: jQuery Plugin for Syntax Highlighting « .Net Braindrops

  2. Hi Tim,

    sorry for answering this late.

    The fixes are quite simple:
    1) There is no language called javascript. 🙂 Just change language=”text/javascript” to type=”text/javascript” to make the script run.
    2) The formatting of the pre-class is wrong. beautyOfCode uses a different style than syntaxhighlighter does. Use “xml xml boc-no-toolbar boc-no-auto-links” instead of “brush: xml; toolbar: false; auto-links: false;”

    With those changes it ran locally, at least. Hope you get it running.

  3. Hi ! Thanks a lot or this jQuery plugin, it does it in a fast & easy way.

    By the way, I don’t have the toolbar “View plain, etc.” by default, is there is something special to do in order to have it displayed ?
    My code is the folowwing :

    VB.Net code here

    jQuery.beautyOfCode.init({
    config: { stripBrs: true},
    brushes: [‘Vb’,’JScript’,’CSharp’]
    });

    Also, my html editor provider (Telerik RadEditor) adds automatically and   in the code. The parameters stripBrs doesn’t seems to change anything, the BR are stripped anyway, but after the formatting, the code appears on 1 line only. …. Any suggestion ?

  4. Hi Lars.

    Is there a place where we can see examples of the various brushes? I can’t find one, but before I create such a page for the community, wanted to double-check.

    (And I believe the 6/21 comment is just some manually-entered spam.)

    Thanks for your work on the plugin,

    ~James

  5. how can i configure this code + tinyMCE ?

    tinyMCE formated like this :

    — CODE —

    function test() : String
    {
    	return 10;
    }
    

    —END—-

    thanks

  6. Pingback: Joseph Easter » jQuery accordion, syntaxhighlighter and searchSuggest added

  7. Hi!
    I must say this is a fantastic plugin, or would be if i could get it working! I really must be doing something wrong. I keep getting an alert saying “Can’t find brush for: Php”.

    this is what i’m putting in my head section:

    $.beautyOfCode.init({brushes: [‘Xml’, ‘JScript’, ‘Plain’, ‘php’]});

    and this is in my HTML body:

    
    <?php echo "hello world" ?> 
    
    

    Am i missing something?

    Thanks in advance!
    Ash

  8. Hey there,

    thanks for your great script. I use it for a while in my TYPO3 installation and it works great.

    Until now i did this by adding plain HTML but i start building a plugin to make this more comfortable. When ive done some more testing i would like to release this extension to the TYP03 ext ter.

    Your code is licensed under LGPL and Alex code under GPL, so it shouldnt be a problem to release my extension. I will add a tribute and links to you both.

    So, its okay for you of i release the extension?

    Thanks again and greetings from Hamburg, Germany.

    Felix

  9. hi

    first thank you so much. your efforts are really appriciated.

    i have tried it on only a php code for the moment, and i have one problem:

    my code appears from right to left (like the page it appears on). i try to tell it with css to be ltr, but it still comes up as rtl.

    what am i doing wrong?

    best regards

    ron

  10. hi

    i have tried putting this (i am using ckeditor):

    	
    this is a word!!!
    
    

    and the paragraph does not show. i added to the brushes Html but it still does not work.

    hope someone can help.

    best regards

    ron

  11. Hi

    Ther is a small bug in the code, it will not work if jQuery is run in noConflict Mode.
    You use the “$” on line 36 and on line 124, use “jQuery” instead and it runs perfectly.

    Thanks for your great work.

    Best Regards
    Jürgen

  12. Pingback: Ten or Twenty improvements for Twenty Ten: Part 1 | Do The Right Thing

  13. Pingback: postrational (postrational) « beautyOfCode – jQuery plugin for Syntax Highlighter 2.0 by Al... « Chat Catcher

  14. Hi Lars,

    Ich versuche mich gerade daran, eine Mehrfach-Auswahl via Single-Select einzubauen …

    Mir fiel auf, das PREs und CODEs komplett umgeschrieben werden, nicht einmal weitere Klassen und IDs bleiben erhalten. Hast du da schon Erfahrung, wie sich das Einschränken lässt, um zumindest die Attribute vom PRE zu erhalten?

    Wo hänge ich am sinnvollsten das Rendering der Selects an, als Erweiterung von deinem ‘ready’?

    … und eine letzte Frage: Schicker als das Verwenden einzelner kompletter Blöcke PRE + CODE fände ich das automatische Erkennen mehrerer CODEs innerhalb eines PREs. Wo wäre hierzu der Code-Hebel anzusetzen?

    Follow-up gerne auch per pm in E-Mail 🙂

    Gute Grüße
    Stefan

  15. Pingback: wirehack7.com

  16. I had some trouble with the Amazon-URL provided with this plugin, worked fine after edit the baseUrl to “http://alexgorbatchev.com/pub/sh/2.1.364/” or another version. (http://alexgorbatchev.com/SyntaxHighlighter/hosting.html)

    @Jackson – Works fine for me, just need to edit the baseUrl to “http://alexgorbatchev.com/pub/sh/3.0.83/”.

    @hups – You also need to edit the baseUrl to an own server and download the data from Alex: http://alexgorbatchev.com/SyntaxHighlighter/download/

  17. Does not work anymore. I have 403 from Amazon and now a 404 from Typepad. Too bad, it was nice. Now I have to switch.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s