Insert code snippet in CKeditor

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.


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.

Syntaxhighlighter Interface

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

Adding Code Snippet

Caution: this plugin simply adds some special markup-tags to your input. For the highlighting-process itself you will need to run Alex Gorbatchev's library on your website too.

Posted by Ingenium Web

Ingenium Web

iNGENIUM Ltd. is an software development company from EU which delivers a full range of custom .NET, web and mobile solutions for different business to meet partner's demand.

The Power of Imagination Makes Us Infinite

Related Posts


comments powered by Disqus