Syntaxhighlighter_XH

Syntaxhighligher_XH facilitates improved presentation of code snippets in the content, for visitors having JavaScript enabled. The actual work is done by Alex Gorbatchev’s Syntaxhighlighter; Syntaxhighlighter_XH merely is meant to simplify the integration in CMSimple_XH. For some content editors, plugins are available which make editing even more convenient.

• Requirements
• Download
• Installation
  • TinyMCE4
  • TinyMCE5
  • CKEditor
• Settings
• Usage
• Limitations
• Troubleshooting
• License
• Credits

Requirements

Syntaxhighligher_XH is a plugin for CMSimple_XH. It requires CMSimple_XH ≥ 1.7.0, and PHP ≥ 7.1.0 with the json extension.

Download

The lastest release is available for download on Github.

Installation

The installation is done as with many other CMSimple_XH plugins. See the CMSimple_XH Wiki for further details.

1. Backup the data on your server.
2. Unzip the distribution on your computer.
3. Upload the whole directory syntaxhighlighter/ to your server into into the plugins/ directory of CMSimple_XH.
4. Set write permissions to the subdirectories config/, css/ and languages/.
5. Navigate to Plugins → Syntaxhighlighter in the back-end to check if all requirements are fulfilled.

For an improved user experience in the editors, you may need to do some additional setup. This is not necessary for recent versions of TinyMCE4 and TinyMCE5.

TinyMCE4

1. Add the following line to external_plugins:

    "syntaxhl": "%CMSIMPLE_ROOT%plugins/syntaxhighlighter/editors/tinymce4/syntaxhl/plugin.min.js"
   

2. Add the syntaxhl button to toolbarN wherever you prefer.

TinyMCE5

1. Add the following line to external_plugins:

    "syntaxhl": "%CMSIMPLE_ROOT%plugins/syntaxhighlighter/editors/tinymce5/syntaxhl/plugin.min.js"
   

2. Add the syntaxhl button to toolbar wherever you prefer.

CKEditor

1. Copy plugins/syntaxhighlighter/editors/ckeditor/syntaxhighlight/ to plugins/ckeditor/plugins_external/.

Settings

The configuration of the plugin is done as with many other CMSimple_XH plugins in the back-end of the Website. Select Plugins → Syntaxhighlighter.

You can change the default settings of Syntaxhighlighter_XH under Config. Hints for the options will be displayed when hovering over the help icons with your mouse.

Localization is done under Language. You can translate the character strings to your own language if there is no appropriate language file available, or customize them according to your needs.

The look of Syntaxhighlighter_XH can be customized under Stylesheet.

Usage

Add code snippets you like to be presented with syntax highlighting to your pages by enclosing it in a <pre> element with a class as described in the manual of Syntaxhighlighter

For TinyMCE 4 and 5 inserting and editing the code snippets can be done by pressing the Insert/Edit code sample button, where you can edit the code snippets and choose the desired language. Other settings have to be done manually in the HTML source code view.

For CKEditor inserting and editing the code snippets can be done by pressing the Add or update a code snippet button, where you can edit the code snippets and the settings.

Limitations

The syntax highlighting, line numbering etc. requires a contemporary browser (e.g. IE is not supported) with JavaScript enabled. In other environments the code snippets are presented unenhanced.

Troubleshooting

Report bugs and ask for support either on Github or in the CMSimple_XH Forum.

License

Syntaxhighlighter_XH is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

Syntaxhighlighter_XH is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantibility or fitness for a particular purpose. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with Syntaxhighlighter_XH. If not, see https://www.gnu.org/licenses/.

Copyright 2012-2023 Christoph M. Becker

Credits

This plugin was inspired by pmolik.

Syntaxhighlighter_XH is powered by Alex Gorbatchev’s Syntaxhighlighter; many thanks for releasing this great tool under LGPL.

The TinyMCE 4 and 5 plugins are based on the codesample plugin by Ephox Corp. The CKEditor plugin is written by Daniel Brain. Many thanks for releasing these plugins under LGPL.

The plugin logo has been designed by YellowIcon. Many thanks for publishing this icon under GPL.

Many thanks to the community at the CMSimple_XH-Forum for tips, suggestions and testing.

And last but not least many thanks to Peter Harteg, the “father” of CMSimple, and all developers of CMSimple_XH without whom this amazing CMS would not exist.