Unable to find an easy to configure plugin for Alex Gorbachev's Syntax Highlighter, I decided to port my WordPress plugin to Joomla, since the main feature that I missed was the ability to have the plugin dynamically select which formatting languages to include on a given page, based on the content. This is where the Auto Brush option shines, saving both bandwidth and improving page loading times for your site.
Install
Download Easy Syntax Highlighter and upload it to your blog, then once it's activated, open your article, click Toggle Editor to go into HTML mode and and insert code into your article in the following format.
Once the pre tag has been inserted into the document with the name of the syntax you want to specify for the code snippet, you can switch back to normal mode and continue editing the code. When you are done, preview or publish the page, and the output should be something like this.
alert("Hello world");
Usage
The first thing you should do (after enabling the plugin) is decide whether you are going to use the Auto Brush feature. If you're like me, and you could be using Bash syntax one day, PHP, HTML or Python the next, then this feature should be enabled. If you're only interested in one language, then it's slightly more efficient to simply disable all the syntax files for the languages you don't use.
The theme CSS file is inserted immediately after the <HEAD> tag so that it loads ahead of your template's CSS file, allowing you override the CSS in the highlighter theme. As an example, I have enlarged the default font size of the code snippet and set it to a fixed with which is slightly narrower than the page width (so that the the scroll bar won't appear on IE), using the following CSS added to my template's CSS file. Please note the "!important" following the overrides I have used, this is required or the new CSS won't override the highlighter's CSS.
/* Set the window to a fixed width */ .syntaxhighlighter { width: 740px !important; }
/* Make the font slightly larger */ .syntaxhighlighter, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody { font-size: 1.02em !important; }
There's a lot of other thing that can be changed. More details are available on Alex's settings page. You can leave any comments or report any bugs right here.
