Syntax highlighting
At some moment GeSHI and CMS Made Simple became incompatible and in order to bring back syntax highlighted source code snippets to the front end of CMSMS, I created a TinyMCE plugin "hljs". The plugin is derived from the "codehighlight" plugin by Nawaf M Al Badia.
The actual syntax highlighting is done by the Javascript tool "highlight.js", see http://softwaremaniacs.org/soft/highlight/en/
The reason for choosing "highlight.js" over the famous "SyntaxHighlighter" is it's ability to auto-detect the source code language. For snippets that are too small for the auto-detection to work properly or just to be sure you can set the language manually in the popup.
Usage
You enter the source code in a popup and after that the code is inserted wrapped by <pre><code>...</code></pre> tags.
Installation
Installing the plugin involves these steps:
- download the file hljs.zip
- unzip it and upload it to "/modules/TinyMCE/tinymce/jscripts/tiny_mce/plugins"
- in the CMSMS admin panel go to "Extensions » TinyMCE WYSIWYG"
- in the "Plugins" tab activate the plugin "hljs"
- in the "Profiles" tab add "hljs," just after "code," to "Toolbar 2" in the "Advanced backend profile settings" section
- to clearly see where your source code is while editing add the following style definition in the "Additions to stylesheet" box in the "Advanced" tab:
pre {
background: #ddd;
}
Optionally you can disable the removal of line breaks by adding the line "remove_linebreaks: false," to the file "modules/TinyMCE/templates/tinyconfig.tpl" (insert it around line number 90).
To install "highlight.js" you should:
- download it form http://softwaremaniacs.org/soft/highlight/en/
- follow the instructions on http://softwaremaniacs.org/soft/highlight/en/description/
Demo
To see it all in action visit Club Webware Mods That site is in Dutch but that shouldn't be a problem in this case.
That's it! Any future updates will be available here.
Previous page: Download