Syntax Highlighter

Client side code highlighter. This is ready-to-use Cotonti port of SyntaxHighlighter by Alex Gorbatchev.

Authors:

• SyntaxHighlighter: Alex Gorbatchev
• Cotonti plugin: Vladimir Sibirov (Trustmaster)
• Cotonti plugin: Alexey Kalnov (Alex300)
• Cotonti color theme: Andrey Matsovkin, (Macik)

GitHub: https://github.com/Cotonti-Extensions/syntax-highlighter

#1. Installation

• Download the plugin and extract "syntaxhighlighter" folder into your Cotonti plugins folder.
• Go to Administration / Extensions and install the SyntaxHighlighter plugin.
• Go to the plugin configuration and select the desired theme and set other options if you need

#2. Usage

Usage with HTML parsing: To highlight source code with some specific language, use HTML tags like this:

<pre class="brush:language;">
    Your code here
</pre>

The list of available brushes and themes: https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Brushes-and-Themes

Plugin for CKEditor: https://ckeditor.com/cke4/addon/syntaxhighlight, https://github.com/dbrain/ckeditor-syntaxhighlight

#3. Color themes

Plugin bundled with a pack of predefined color themes. But you can adjust some of it to suit you needs with Cotonti theme colors. To do that copy theme CSS file from syntaxhighlighter/lib/ folder to your theme sub folder named styles — themes/theme-name/styles. File name shoud have prefix syntaxhighlighter-. For example custom theme file full name can be like this: themes/theme-name/styles/syntaxhighlighter-my-awesome-theme.css.
Now you can change it for your needs or create your own. All CSS files located in themes/theme-name/styles folder override default ones with same names.

#4. Examples

Default theme:

Cotonti theme: