Code Snippet — CKEditor Sample

This editor is using the Code Snippet plugin which introduces beautiful code snippets. By default the codesnippet plugin depends on the built-in client-side syntax highlighting library highlight.js.

You can adjust the appearance of code snippets using the codeSnippet_theme configuration variable (see available themes).

Select theme:

The CKEditor instance below was created by using the following configuration settings:

CKEDITOR.replace( 'editor1', {
	extraPlugins: 'codesnippet',
	codeSnippet_theme: 'monokai_sublime'
} );

Please note that this plugin is not compatible with Internet Explorer 8.

Inline editor

The following sample shows the Code Snippet plugin running inside an inline CKEditor instance. The CKEditor instance below was created by using the following configuration settings:

CKEDITOR.inline( 'editable', {
	extraPlugins: 'codesnippet'
} );

Note: The highlight.js themes must be loaded manually to be applied inside an inline editor instance, as the codeSnippet_theme setting will not work in that case. You need to include the stylesheet in the <head> section of the page, for example:

<head>
	...
	<link href="path/to/highlight.js/styles/monokai_sublime.css" rel="stylesheet">
</head>

JavaScript code:

function isEmpty( object ) {
	for ( var i in object ) {
		if ( object.hasOwnProperty( i ) )
			return false;
	}
	return true;
}

SQL query:

SELECT cust.id, cust.name, loc.city FROM cust LEFT JOIN loc ON ( cust.loc_id = loc.id ) WHERE cust.type IN ( 1, 2 );

Unknown markup:

 ________________
/                \
| How about moo? |  ^__^
\________________/  (oo)\_______
                  \ (__)\       )\/\
                        ||----w |
                        ||     ||

Server-side Highlighting and Custom Highlighting Engines

The Code Snippet GeSHi plugin is an extension of the Code Snippet plugin which uses a server-side highligter.

CKEditor Samples » Code Snippet Plugin

Inline editor

Server-side Highlighting and Custom Highlighting Engines