Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
149 lines (126 sloc) 6.61 KB
<!DOCTYPE html>
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see or
<meta charset="utf-8">
<meta name="description" content="Code Snippets. Syntax highlighting for code snippets inserted into CKEditor content.">
<meta name="keywords" content="ckeditor, editor, wysiwyg, code, snippet, snippets, pre, syntax, highlighting, highlighter, coloring, source, raw, configure, configuration, setup, settings, options, customization, customize, customise, customisation, config, modification, modify, change">
<meta name="sdk-samples" content="Using syntax highlighting">
<meta name="sdk-category" content="sdk-inserting-content">
<meta name="sdk-order" content="60">
<title>Code Snippets</title>
<link href=",500,400" rel="stylesheet">
<link href="../template/theme/css/sdk.css" rel="stylesheet">
<script src="../../ckeditor-dev/ckeditor.js"></script>
<script src="assets/picoModal-2.0.1.min.js"></script>
<script src="assets/contentloaded.js"></script>
<script src="assets/simplesample.js"></script>
<script src="assets/beautify-html.js"></script>
<script src="assets/sample.js"></script>
<!--[if lt IE 9]>
<script src="assets/html5shiv.min.js"></script>
<link rel="icon" href="../template/theme/img/favicon.ico">
<header class="sdk-header">
<section class="sdk-container">
<nav class="sdk-sidebar">
<section class="sdk-contents">
<h1>Inserting Code Snippets <a class="documentation" href="">Documentation</a></h1>
The optional <a href="">Code Snippet</a> 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 <a href="">highlight.js</a>.
When the Code Snippet plugin is enabled, the <span class="button_icon" data-icon="codesnippet" title="Insert code snippet">&nbsp;</span> button is automatically added to the toolbar. Once clicked, it opens the <strong>Code snippet</strong> dialog window that lets you add a piece of code and set the programming language it is written in.
<h2>Using Syntax Highlighting</h2>
A few configuration options are available to fine-tune this feature, including setting a <a href="">custom highlighter theme</a> (see <a href="">available themes</a>), adjusting support for <a href="">programming languages</a>, or even implementing a <a href="">different highlighter library</a>. Refer to the <a href="">Inserting Code Snippets</a> article to learn more about this feature.
You can select a theme for the editor instance below here: <select id="select"></select>
<textarea id="editor1" name="editor1" data-sample="1" data-sample-preserveWhitespace>
&lt;p&gt;JavaScript code:&lt;/p&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;code&gt; ________________
/ \
| How about moo? | ^__^
\________________/ (oo)\_______
\ (__)\ )\/\
||----w |
|| ||
<p id="ie8-warning">
Please note that this plugin is not compatible with Internet Explorer 8.
<h2>GeSHi &mdash; Custom Highlighting Engine Example</h2>
The <a href="">Code Snippet GeSHi</a> plugin is an
extension of the Code Snippet plugin. It implements the well-known <a href="">GeSHi</a> library with a server-side highlighter. See the
<a href="">Inserting Code Snippets Using GeSHi</a> article for implementation details.
<h2>Related Features</h2>
<li><a href="./styles.html#widget-styles">Styling and Formatting &ndash; Applying Styles to Editor Content</a></li>
<script data-sample="1">
var config = {
extraPlugins: 'codesnippet',
codeSnippet_theme: 'monokai_sublime',
height: 356
CKEDITOR.replace( 'editor1', config );
( function() {
function initThemeChange() {
var templates = [
'monokai_sublime', 'default', 'arta', 'ascetic', 'atelier-dune.dark', 'atelier-dune.light', 'atelier-forest.dark', 'atelier-forest.light', 'atelier-heath.dark', 'atelier-heath.light', 'atelier-lakeside.dark', 'atelier-lakeside.light', 'atelier-seaside.dark', 'atelier-seaside.light', 'brown_paper', 'dark', 'docco', 'far', 'foundation', 'github', 'googlecode', 'idea', 'ir_black', 'magula', 'mono-blue', 'monokai', 'obsidian', 'paraiso.dark', 'paraiso.light', 'pojoaque', 'railscasts', 'rainbow', 'school_book', 'solarized_dark', 'solarized_light', 'sunburst', 'tomorrow-night-blue', 'tomorrow-night-bright', 'tomorrow-night-eighties', 'tomorrow-night', 'tomorrow', 'vs', 'xcode', 'zenburn'
pre = CKEDITOR.document.getById( 'sampleConfig' ),
select = CKEDITOR.document.getById( 'select' ),
codeTemplate = '<strong>config.extraPlugins = \'codesnippet\';</strong>\n' +
'config.codeSnippet_theme = \'{tpl}\';\n',
name, option;
while ( ( name = templates.shift() ) ) {
option = CKEDITOR.document.createElement( 'option', {
attributes: {
value: name
} );
option.setText( name );
select.append( option );
select.$.onchange = function() {
if ( CKEDITOR.instances.editor1 )
CKEDITOR.replace( 'editor1', {}, config, {
codeSnippet_theme: this.value
}, true ) );
if ( && CKEDITOR.env.version == 8 )
CKEDITOR.document.getById( 'ie8-warning' ).addClass( 'tip alert' );
}() );
<footer class="sdk-footer">
You can’t perform that action at this time.