# CKEditor Samples » Code Snippet Plugin

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.