Inserting Code Snippets Documentation

The optional Code Snippet plugin, introduced in CKEditor 4.4, supports inserting beautiful code snippets into the editor content. By default the plugin depends on the built-in client-side syntax highlighting library highlight.js.

When the Code Snippet plugin is enabled, the button is automatically added to the toolbar. Once clicked, it opens the Code snippet dialog window that lets you add a piece of code and set the programming language it is written in.

Using Syntax Highlighting

A few configuration options are available to fine-tune this feature, including setting a custom highlighter theme (see available themes), adjusting support for programming languages, or even implementing a different highlighter library. Refer to the Inserting Code Snippets article to learn more about this feature.

You can select a theme for the editor instance below here:

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

GeSHi — Custom Highlighting Engine Example

The Code Snippet GeSHi plugin is an extension of the Code Snippet plugin. It implements the well-known GeSHi library with a server-side highlighter. See the Inserting Code Snippets Using GeSHi article for implementation details.

Related Features

Styling and Formatting – Applying Styles to Editor Content

Get Sample Source Code

Using syntax highlighting

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Using syntax highlighting</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea id="editor1" name="editor1">&lt;p&gt;JavaScript code:&lt;/p&gt;

&lt;pre&gt;
&lt;code class="language-javascript"&gt;var cow = new Mammal( "moo", {
	legs: 4
} );&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Unknown markup:&lt;/p&gt;

&lt;pre&gt;
&lt;code&gt; ________________
/                \
| How about moo? |  ^__^
\________________/  (oo)\_______
                  \ (__)\       )\/\
                        ||----w |
                        ||     ||
&lt;/code&gt;&lt;/pre&gt;
			</textarea>
  <script>
    var config = {
      extraPlugins: 'codesnippet',
      codeSnippet_theme: 'monokai-sublime',
      height: 356,
      removeButtons: 'PasteFromWord'
    };

    CKEDITOR.replace('editor1', config);
  </script>
</body>

</html>