Syntax Highlighter

Syntax Highlighter


Syntax Highlighter is a JavaScript code/text highlighting utility that provides highlighting for different types of languages like PHP, HTML, plain... Version 3.0 doesn't implement the tricky Flash options to copy to clipboard. You can just doubleclick the code to select all and copy/paste at will.

Get Syntax Highlighter from http://alexgorbatchev.com/SyntaxHighlighter/download/.

Frontend

Each language, like PHP, CSS or JavaScript needs to be rendered differently, and they each need their own javascript file to do so. There is autoloading functionality available, but I'm not going to use that, to avoid any issues with SilverStripe loaders. So that means preloading them. In this example I'm presuming all code is added to the mysite/javascript directory. I'm not using every available brush, just a selection - but you can load them all if you want...

Add the following files to mysite/javascript/syntaxhl/

  • shCore.js
  • shBrushPlain.js
  • shBrushPhp.js
  • shBrushJScript.js
  • shBrushCss.js


Add the following files to mysite/css/syntaxhl/

  • shCore.css
  • shThemeDefault.css

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.

public function init() {
	parent::init(); 

 	Requirements::javascript('mysite/javascript/syntaxhl/shCore.js');
	Requirements::javascript('mysite/javascript/syntaxhl/shBrushPlain.js');
	Requirements::javascript('mysite/javascript/syntaxhl/shBrushPhp.js');
	Requirements::javascript('mysite/javascript/syntaxhl/shBrushJScript.js');
	Requirements::javascript('mysite/javascript/syntaxhl/shBrushCss.js');

	Requirements::css("mysite/css/syntaxhl/shCore.css");
	Requirements::css("mysite/css/syntaxhl/shThemeDefault.css");
	Requirements::customScript(<<<JS
		SyntaxHighlighter.all();

	);
	...
}

HTML: preformatted

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...

CMS: Syntax Highlighter plugin

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...

@TODO: Another directory???

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 :-)

Comments

Het versturen van reacties is uitgeschakeld.

RSS feed voor reacties op deze pagina