Inserting Code Snippets
This feature was introduced in CKEditor 4.4. It is provided through an optional plugin that is not included in the CKEditor presets available from the Download site and needs to be added to your custom build with CKBuilder.
The optional Code Snippet plugin allows you to insert rich code fragments and see a live preview with highlighted syntax. Its original implementation uses the highlight.js library, but the plugin exposes a convenient interface for hooking any other library, even a server-side one.
Enabling Syntax Highlighting
Inline and div-based Editors
If you use the inline or div-based editor, you will need to perform an additional step after installing the plugin, since the highlighter stylesheet will not be loaded automatically by the editor. You will thus need to link the stylesheet for the chosen
highlight.js theme in the
<head> section of your page. The following code will load the default theme:
<head> ... <link href="ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" rel="stylesheet"> </head>
To see the highlighter styles on the target page where CKEditor content is displayed, you will need to load the
highlight.js script and theme's stylesheet on this page. You can either reuse a copy of
highlight.js placed in the
ckeditor/plugins/codesnippet/lib/highlight directory or download your own copy from the highlight.js download page.
Attach it to the
<head> section of your page. The following code will load the
highlight.js library and the stylesheet for the default theme:
<head> ... <link href="ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" rel="stylesheet"> <script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script> </head>
highlight.js on all
<pre><code> .. </code></pre> elements with the following code:
You might also want to initialize the highlighter only on selected elements. In this case you will need to use the
hljs.highlightBlock() method on each DOM element containing the code to highlight. See the "Custom Initialization" section on the highlight.js Usage page for more information.
After performing the steps described above, all the code snippets created with CKEditor will be highlighted.
Changing Highlighter Theme
config.codeSnippet_theme = 'school_book';
In inline or div-based editor and on the target page that displays content created with CKEditor you can switch between themes by loading the different theme's stylesheets. See the Enabling Syntax Highlighting section for more information.
Changing Supported Languages
You can customize the list of languages with syntax highlighting support by setting the CKEDITOR.config.codeSnippet_languages option.
Hooking a Custom Syntax Highlighter
For more information on how to implement a custom highlighter check the Code Snippet Highlighter API documentation.
The Code Snippet plugin interface was designed with extensibility in mind. As a sample implementation the GeSHi highlighter integration was created and is available as a separate Code Snippet GeSHi plugin.
Full installation instructions can be found in the Iserting Code Snippets Using GeSHi article.
Internet Explorer 8 Support
Since Internet Explorer 8 support was dropped in highlight.js 7.3 (see the GitHub ticket), the default implementation of the Code Snippet plugin will not provide any higlighting in this browser version. To solve this problem use a custom highlighter.
Code Snippets Demo
See the working "Inserting Code Snippets" sample that shows a few instances of the code snippet widgets as well as the syntax highlighter themes which are available in the default implementation.