Insert code snippet in CKeditor

We were looking for the plugin for our CKEditor to insert code snippets. After some research on the web I found a great plugin called Syntaxhighlighter Interface.

Because I already have read some good user comments about it and used previously Alex Gorbatchev's SyntaxHighlighter I wanted to give it a try.

Syntaxhighlighter Interface

It is a plugin originally written for CKEditor 3+ that enables code syntax highlighting. Simply said it is interface for Alex Gorbatchev's syntaxhighlighter and it works great with CKEditor 4+ versions.

Installation:

First method: simply use the ckbuilder to add syntaxhighlighter to your editor. Honestly, I recommend using this method, because I had a lot of issues doing the same thing manually, especially if you want to avoid styling issues.

Second method: Download the latest version of plugin here, add the syntaxhighlighter-folder to your ckeditor's subfolder "plugins" and add syntaxhighlighter to the extraPlugins-entry in your config.js. If the plugin doesn't appear try adding an item called 'Syntaxhighlight' to your toolbar.

Configure the syntax highlighter for CKEditor

In the CKEditor configuration file (config.js) add the following code:

config.extraPlugins = 'syntaxhighlight';

Also please add the following code in the configuration file build-config.js:

plugins : {
		'syntaxhighlight' : 1
	},

Like I said I don’t recommend using custom installation and I recommend using ckbuild instead.

Using the syntax hightlighter

Please note that the proper Text format must be chosen when creating/editing content to have the new added button. During the creation of the content, click on the button with code symbol on it to open the plugin window.

Select the programming language to highlight and insert the code there.