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>{literal}<code>...</code>{/literal}</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:
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).pre {
background: #ddd;
}
To install "highlight.js" you should:
- download it form http://softwaremaniacs.org/soft/highlight/en/
- follow the instructions on http://softwaremaniacs.org/soft/highlig ... scription/
Demo
To see it all in action visit "Club Webware Mods". All text is in Dutch but that shouldn't be a problem in this case.
That's it! Any future updates will be available at http://wardenier.com/syntax-highlighting/ and here but I can't promise to keep both in sync.
Regards,
Ron Wardenier
