3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
\r
4 For licensing, see LICENSE.md or http://ckeditor.com/license
\r
8 <meta charset="utf-8">
\r
9 <title>Code Snippet — CKEditor Sample</title>
\r
10 <script src="../../../ckeditor.js"></script>
\r
11 <link href="../../../samples/old/sample.css" rel="stylesheet">
\r
12 <link href="../../../plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" rel="stylesheet">
\r
13 <meta name="ckeditor-sample-name" content="Code Snippet plugin">
\r
14 <meta name="ckeditor-sample-group" content="Plugins">
\r
15 <meta name="ckeditor-sample-description" content="View and modify code using the Code Snippet plugin.">
\r
16 <meta name="ckeditor-sample-isnew" content="1">
\r
27 <h1 class="samples">
\r
28 <a href="../../../samples/old/index.html">CKEditor Samples</a> » Code Snippet Plugin
\r
30 <div class="warning deprecated">
\r
31 This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/codesnippet.html">brand new version in CKEditor SDK</a>.
\r
34 <div class="description">
\r
36 This editor is using the <strong><a href="http://ckeditor.com/addon/codesnippet">Code Snippet</a></strong> plugin which introduces beautiful code snippets.
\r
37 By default the <code>codesnippet</code> plugin depends on the built-in client-side syntax highlighting
\r
38 library <a href="http://highlightjs.org">highlight.js</a>.
\r
41 You can adjust the appearance of code snippets using the <code><a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-codeSnippet_theme">codeSnippet_theme</a></code> configuration variable
\r
42 (see <a href="http://highlightjs.org/static/test.html">available themes</a>).
\r
45 Select theme: <select id="select"></select>
\r
48 The CKEditor instance below was created by using the following configuration settings:
\r
51 <pre class="samples" id="sampleConfig">
\r
52 CKEDITOR.replace( 'editor1', {
\r
53 <strong>extraPlugins: 'codesnippet',</strong>
\r
54 codeSnippet_theme: 'monokai_sublime'
\r
58 <p id="ie8-warning">
\r
59 Please note that this plugin is not compatible with Internet Explorer 8.
\r
63 <textarea id="editor1">
\r
64 <p>JavaScript code:</p>
\r
67 <code class="language-javascript">function isEmpty( object ) {
\r
68 for ( var i in object ) {
\r
69 if ( object.hasOwnProperty( i ) )
\r
73 }</code></pre>
\r
75 <p>SQL query:</p>
\r
78 <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>
\r
80 <p>Unknown markup:</p>
\r
83 <code> ________________
\r
85 | How about moo? | ^__^
\r
86 \________________/ (oo)\_______
\r
90 </code></pre>
\r
93 <h2>Inline editor</h2>
\r
95 <div class="description">
\r
97 The following sample shows the <strong>Code Snippet</strong> plugin running inside
\r
98 an inline CKEditor instance. The CKEditor instance below was created by using the following configuration settings:
\r
101 <pre class="samples">
\r
102 CKEDITOR.inline( 'editable', {
\r
103 <strong>extraPlugins: 'codesnippet'</strong>
\r
108 <strong>Note</strong>: The <a href="http://highlightjs.org/static/test.html">highlight.js themes</a>
\r
109 must be loaded manually to be applied inside an inline editor instance, as the
\r
110 <code>codeSnippet_theme</code> setting will not work in that case.
\r
111 You need to include the stylesheet in the <code><head></code> section of the page, for example:
\r
114 <pre class="samples">
\r
117 <link href="path/to/highlight.js/styles/monokai_sublime.css" rel="stylesheet">
\r
123 <div id="editable" contenteditable="true">
\r
125 <p>JavaScript code:</p>
\r
127 <pre><code class="language-javascript">function isEmpty( object ) {
\r
128 for ( var i in object ) {
\r
129 if ( object.hasOwnProperty( i ) )
\r
137 <pre><code class="language-sql">SELECT cust.id, cust.name, loc.city FROM cust LEFT JOIN loc ON ( cust.loc_id = loc.id ) WHERE cust.type IN ( 1, 2 );</code></pre>
\r
139 <p>Unknown markup:</p>
\r
141 <pre><code> ________________
\r
143 | How about moo? | ^__^
\r
144 \________________/ (oo)\_______
\r
151 <h2>Server-side Highlighting and Custom Highlighting Engines</h2>
\r
154 The <a href="http://ckeditor.com/addon/codesnippetgeshi"><strong>Code Snippet GeSHi</strong></a> plugin is an
\r
155 extension of the <strong>Code Snippet</strong> plugin which uses a server-side highligter.
\r
159 It also is possible to replace the default highlighter with any library using
\r
160 the <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.codesnippet.highlighter">Highlighter API</a>
\r
161 and the <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.codesnippet-method-setHighlighter"><code>editor.plugins.codesnippet.setHighlighter()</code></a> method.
\r
166 CKEDITOR.disableAutoInline = true;
\r
169 extraPlugins: 'codesnippet',
\r
171 [ 'Source' ], [ 'Undo', 'Redo' ], [ 'Bold', 'Italic', 'Underline' ], [ 'CodeSnippet' ]
\r
173 codeSnippet_theme: 'monokai_sublime',
\r
177 CKEDITOR.replace( 'editor1', config );
\r
179 CKEDITOR.inline( 'editable', CKEDITOR.tools.extend( {}, config, {
\r
180 extraPlugins: 'codesnippet'
\r
185 function initThemeChange() {
\r
187 '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'
\r
189 pre = CKEDITOR.document.getById( 'sampleConfig' ),
\r
190 select = CKEDITOR.document.getById( 'select' ),
\r
191 codeTemplate = 'CKEDITOR.replace( \'editor1\', {\n' +
\r
192 ' <strong>extraPlugins: \'codesnippet\',</strong>\n' +
\r
193 ' codeSnippet_theme: \'{tpl}\'\n' +
\r
197 while ( ( name = templates.shift() ) ) {
\r
198 option = CKEDITOR.document.createElement( 'option', {
\r
204 option.setText( name );
\r
205 select.append( option );
\r
208 select.$.onchange = function() {
\r
209 if ( CKEDITOR.instances.editor1 )
\r
210 CKEDITOR.instances.editor1.destroy();
\r
212 CKEDITOR.replace( 'editor1', CKEDITOR.tools.extend( {}, config, {
\r
213 codeSnippet_theme: this.value
\r
216 pre.setHtml( codeTemplate.replace( '{tpl}', this.value ) );
\r
220 if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 )
\r
221 CKEDITOR.document.getById( 'ie8-warning' ).addClass( 'warning' );
\r
228 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
\r
231 Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
\r
232 Knabben. All rights reserved.
\r