Code Snippet — CKEditor Sample
Description: Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.

# CKEditor Samples » Code Snippet Plugin

This sample is not maintained anymore. Check out its brand new version in CKEditor Examples.

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.

<p>JavaScript code:</p> <pre> <code class="language-javascript">function isEmpty( object ) { for ( var i in object ) { if ( object.hasOwnProperty( i ) ) return false; } return true; }</code></pre> <p>SQL query:</p> <pre> <code class="language-sql">SELECT cust.id FROM cust LEFT JOIN loc ON ( cust.loc_id = loc.id ) WHERE cust.type IN ( 1, 2 );</code></pre> <p>Unknown markup:</p> <pre> <code> ________________ / \ | How about moo? | ^__^ \________________/ (oo)\_______ \ (__)\ )\/\ ||----w | || || </code></pre>

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

It also is possible to replace the default highlighter with any library using the Highlighter API and the `editor.plugins.codesnippet.setHighlighter()` method.