Updated: 01/02/2012 12:26pm
Get Syntax Highlighter from http://alexgorbatchev.com/SyntaxHighlighter/download/.
Add the following files to mysite/css/syntaxhl/
In this case I'm loading all required files from the page_Controllers init() method. I could use the template, but in this case maybe a bit more flexible. HighLighting is activated by the SyntaxHighlighter.all(); script.
To see syntax highlghting in action, all you need is a bit of preformated text in your HTML, with a brush attached to signal which type of highlighting you want:
<pre> do someting... </pre>
But there you'll run into some trouble: Syntax Highlighter wants this bit of code with all its tabs, linefeeds and whitespace intact, but tinyMCE will replace line-feeds by <br /> and remove tabs... So the only thing you can do is enter the tag in tinyMCE's HTML source editor, and you definitely don't want that! But there is a solution...
The TinyMCE syntaxhl plugin lets you create a button in the editor, that will show a popup where you can insert the code you want to highlight. It also gives access to some syntax Highlighter settings, like selecting the desired language and setting the fontsize. The latter doen't seem to do very much, but I guess you'd want to use the stylesheet for that... This plugin is said to support Syntax Higlighter up to version 2.0, but I find it works with version 3.0 as well.
Get the syntaxhl plugin from https://github.com/RichGuk/syntaxhl.
For this plugin to work 'out of the box' you need to move it to the TinyMCE plugin directory: /xxxxxxxxx/sapphire/thirdparty/tinymce/plugins/. Then you need to add the following towards the end of your /cms/_config.php file:
HtmlEditorConfig::get('cms')->enablePlugins('syntaxhl'); HtmlEditorConfig::get('cms')->insertButtonsAfter('separator', 'syntaxhl');
This will enable the plugin and create a button, shaped like a yellow pencil, just after the separator button in the tinyMCE menubar. This works nicely, though you have to take care when editing the content in your WYSIWYG afterwards - before you know it, the editor will have added a couple of <br /> tags...
It would be great if I could place the plugin in some other directory of my choice. Unfortunately I can point to that directory from the _config.php file, the popup wo'nt load properly. This is because it looks for the tiny_mce_popup.js file in the wrong place (dialog.htm, line 6) and the tinyMCEPopup.requireLangPack() method, used in a couple of files, doen't work properly. If someone wants to look into that, it would be great :-)