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[3,6]">
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.
Lars Corneliussen 