Install the downloaded zip file using Joomla!'s extensions installer. Go to Extensions -> Extension Manager, then under Upload Package File click on Browse, and select the zip file, and click Upload & Install.

If upgrading from a previous version, it is normally safe to simply install it as usual over the top of the existing plugin. First, however, check the board for Smart Highlighter in the forum to see if there are any upgrade instructions for your specific version. If installing over the top of an existing previous version, open the plugin settings page and click on save, even if you haven't changed any settings. This makes sure that the database is up to date with any new or changed settings in the new version.

Once installed, the plugin must be enabled. Under Extensions -> Plugin Manager, look for Content - Smart Highlighter, and either click on the red circle, or open the plugin's settings page and select Enabled.

Adding Code to an Article

Once the Smart Highlighter plugin is enabled, the only further step required is to enter your code sample into an article. You may need to toggle on source code view, depending on which article editor you are using. Enter in a pre block, with a class attribute that indicates the programming language of your code sample. Within the pre start and end tag, enter your code sample. Note that in order for this to work all < and > characters in your code sample need to be converted to their html-escaped equivalents &lt; and &gt;. The paid version of Smart Highlighter contains a code conversion tool in it's plugin settings page that can perform this conversion for you at the click of a button.

Here are a couple of examples. First is the html as entered into the article, next is that html displayed using Syntax Highlighter (v2) as loaded by Smart Highlighter on this page.

<pre class="brush: php">
function myFunc($arg)
{
    return $arg + 1;
}
</pre>

function myFunc($arg)
{
    return $arg + 1;
}

Note here that the conversion of all < and > to &lt; and &gt; can be done instantly using this plugin's Code Converter (paid version, see below).

<pre class="brush: xml; gutter: false">
&lt;files&gt;
    &lt;filename plugin="smarthighlighter"&gt;smarthighlighter.php&lt;/filename&gt;
    &lt;filename&gt;index.html&lt;/filename&gt;
    &lt;folder&gt;language&lt;/folder&gt;    
    &lt;folder&gt;syntaxhighlighter2&lt;/folder&gt;
    &lt;folder&gt;syntaxhighlighter3&lt;/folder&gt;
    &lt;folder&gt;formfields&lt;/folder&gt;
&lt;/files&gt;
</pre>

<files>
    <filename plugin="smarthighlighter">smarthighlighter.php</filename>
    <filename>index.html</filename>
    <folder>language</folder>    
    <folder>syntaxhighlighter2</folder>
    <folder>syntaxhighlighter3</folder>
    <folder>formfields</folder>
</files>

Smart Highlighter's settings page also contains a listing of all possible language aliases, and Syntax Highlighter options, for easy reference.

Plugin Settings

Basic Options

• SyntaxHighlighter Version: Which version of the SyntaxHighlighter library to use.
• Theme: Which SyntaxHighlighter theme to use.
• If language not in v2?: This defines the behaviour if the page contains a language not supported in v2 of Syntax Highlighter (Applescript or Sass).
  Do Nothing: Load v2 as normal, in which case an alert box will display from Syntax Highlighter indicating that it can't find the corresponding brush.
  Switch to v3: Automatically switch to v3 of Syntax Highlighter, which does support the language.

Global Config (v2.x) (Paid version only)

• Expand Source: Message to expand source.
• Help: Help message.
• Alert: Alert message.
• No Brush: No brush message.
• Brush No Html Script: Message when brush doesn't support html-script option.
• View Source: View source message.
• Copy To Clipboard: Copy to clipboard message.
• Copy To Clipboard Confirm: Copy to clipboard confirmation message.
• Print: Print message.

Global Config (v3.x) (Paid version only)

• Expand Source: Message to expand source.
• Help: Help message.
• Alert: Alert message.
• No Brush: No brush message.
• Brush No Html Script: Message when brush doesn't support html-script option.

Global Defaults

• Auto-Links: Allows you to turn detection of links in the highlighted element on and off. If the option is turned off, URLs won’t be clickable.
• Class Name: Allows you to add a custom class (or multiple classes) to every highlighter element that will be created on the page.
• Collapse: Allows you to force highlighted elements on the page to be collapsed by default.
• First Line: Allows you to change the first (starting) line number.
• Gutter: Allows you to turn gutter with line numbers on and off.
• HTML Script: Allows you to highlight a mixture of HTML/XML code and a script which is very common in web development. The brush you are using must support this feature, and Smart Highlighter will automatically add the xml brush required. Note that setting this global default to true does not get overridden by setting it to false on an individual element.
• Smart Tabs: Allows you to turn smart tabs feature on and off.
• Tab Size: Allows you to adjust tab size.
• Toolbar: Toggles toolbar on/off.

CSS Options (Paid version only)

 Note that clicking on any of these text boxes opens a convenient colour picker in Joomla! 2.5.

• Gutter Border Colour: The colour of the vertical border between the line numbers and the code. For all options, leave at css to use the value in the css file.
• Gutter Highlighted Bgnd. Colour: Background colour of the gutter for lines that are highlighted.
• Toolbar Bgnd. Colour: Background colour of the toolbar.
• Collapsed Border Colour: Colour of the box/border when the code is collapsed.
• Collapsed Text Colour: Colour of the expand source or show source text if the code block starts collapsed.
• Collapsed Text Hover Colour: Hover colour of the expand source or show source text if the code block starts collapsed.
• Line Number Colour: Colour of the line numbers.
• Highlighted Line Number Colour: Colour of the line numbers for lines that are highlighted.

Code Converter (Paid version only)

Use this tool to convert < and > to &lt; and &gt;. Enter your source code in the first text area, click Convert, and the second text area will contain the converted code for you to paste directly into your article.