-<!DOCTYPE html>
-<!--
-Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
-For licensing, see LICENSE.md or http://ckeditor.com/license
--->
-<html>
-<head>
- <meta charset="utf-8">
- <title>Code Snippet — CKEditor Sample</title>
- <script src="../../../ckeditor.js"></script>
- <link href="../../../samples/old/sample.css" rel="stylesheet">
- <link href="../../../plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" rel="stylesheet">
- <meta name="ckeditor-sample-name" content="Code Snippet plugin">
- <meta name="ckeditor-sample-group" content="Plugins">
- <meta name="ckeditor-sample-description" content="View and modify code using the Code Snippet plugin.">
- <meta name="ckeditor-sample-isnew" content="1">
- <style>
-
- #editable
- {
- padding: 10px 20px;
- }
-
- </style>
-</head>
-<body>
- <h1 class="samples">
- <a href="../../../samples/old/index.html">CKEditor Samples</a> » Code Snippet Plugin
- </h1>
- <div class="warning deprecated">
- 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>.
- </div>
-
- <div class="description">
- <p>
- This editor is using the <strong><a href="http://ckeditor.com/addon/codesnippet">Code Snippet</a></strong> plugin which introduces beautiful code snippets.
- By default the <code>codesnippet</code> plugin depends on the built-in client-side syntax highlighting
- library <a href="http://highlightjs.org">highlight.js</a>.
- </p>
- <p>
- 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
- (see <a href="http://highlightjs.org/static/test.html">available themes</a>).
- </p>
- <p>
- Select theme: <select id="select"></select>
- </p>
- <p>
- The CKEditor instance below was created by using the following configuration settings:
- </p>
-
-<pre class="samples" id="sampleConfig">
-CKEDITOR.replace( 'editor1', {
- <strong>extraPlugins: 'codesnippet',</strong>
- codeSnippet_theme: 'monokai_sublime'
-} );
-</pre>
-
- <p id="ie8-warning">
- Please note that this plugin is not compatible with Internet Explorer 8.
- </p>
- </div>
-
- <textarea id="editor1">
-<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>
- </textarea>
-
- <h2>Inline editor</h2>
-
- <div class="description">
- <p>
- The following sample shows the <strong>Code Snippet</strong> plugin running inside
- an inline CKEditor instance. The CKEditor instance below was created by using the following configuration settings:
- </p>
-
-<pre class="samples">
-CKEDITOR.inline( 'editable', {
- <strong>extraPlugins: 'codesnippet'</strong>
-} );
-</pre>
-
- <p>
- <strong>Note</strong>: The <a href="http://highlightjs.org/static/test.html">highlight.js themes</a>
- must be loaded manually to be applied inside an inline editor instance, as the
- <code>codeSnippet_theme</code> setting will not work in that case.
- You need to include the stylesheet in the <code><head></code> section of the page, for example:
- </p>
-
-<pre class="samples">
-<head>
- ...
- <link href="path/to/highlight.js/styles/monokai_sublime.css" rel="stylesheet">
-</head>
-</pre>
-
- </div>
-
- <div id="editable" contenteditable="true">
-
-<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, cust.name, loc.city 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>
- </div>
-
- <h2>Server-side Highlighting and Custom Highlighting Engines</h2>
-
- <p>
- The <a href="http://ckeditor.com/addon/codesnippetgeshi"><strong>Code Snippet GeSHi</strong></a> plugin is an
- extension of the <strong>Code Snippet</strong> plugin which uses a server-side highligter.
- </p>
-
- <p>
- It also is possible to replace the default highlighter with any library using
- the <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.codesnippet.highlighter">Highlighter API</a>
- and the <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.codesnippet-method-setHighlighter"><code>editor.plugins.codesnippet.setHighlighter()</code></a> method.
- </p>
-
- <script>
- ( function() {
- CKEDITOR.disableAutoInline = true;
-
- var config = {
- extraPlugins: 'codesnippet',
- toolbar: [
- [ 'Source' ], [ 'Undo', 'Redo' ], [ 'Bold', 'Italic', 'Underline' ], [ 'CodeSnippet' ]
- ],
- codeSnippet_theme: 'monokai_sublime',
- height: 400
- };
-
- CKEDITOR.replace( 'editor1', config );
-
- CKEDITOR.inline( 'editable', CKEDITOR.tools.extend( {}, config, {
- extraPlugins: 'codesnippet'
- }, true ) );
-
- initThemeChange();
-
- 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 = 'CKEDITOR.replace( \'editor1\', {\n' +
- ' <strong>extraPlugins: \'codesnippet\',</strong>\n' +
- ' 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.instances.editor1.destroy();
-
- CKEDITOR.replace( 'editor1', CKEDITOR.tools.extend( {}, config, {
- codeSnippet_theme: this.value
- }, true ) );
-
- pre.setHtml( codeTemplate.replace( '{tpl}', this.value ) );
- };
- }
-
- if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 )
- CKEDITOR.document.getById( 'ie8-warning' ).addClass( 'warning' );
- }() );
- </script>
-
- <div id="footer">
- <hr>
- <p>
- CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
- </p>
- <p id="copy">
- Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
- Knabben. All rights reserved.
- </p>
- </div>
-</body>
-</html>
+<!DOCTYPE html>\r
+<!--\r
+Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r
+For licensing, see LICENSE.md or http://ckeditor.com/license\r
+-->\r
+<html>\r
+<head>\r
+ <meta charset="utf-8">\r
+ <title>Code Snippet — CKEditor Sample</title>\r
+ <script src="../../../ckeditor.js"></script>\r
+ <link href="../../../samples/old/sample.css" rel="stylesheet">\r
+ <link href="../../../plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" rel="stylesheet">\r
+ <meta name="ckeditor-sample-name" content="Code Snippet plugin">\r
+ <meta name="ckeditor-sample-group" content="Plugins">\r
+ <meta name="ckeditor-sample-description" content="View and modify code using the Code Snippet plugin.">\r
+ <meta name="ckeditor-sample-isnew" content="1">\r
+ <style>\r
+\r
+ #editable\r
+ {\r
+ padding: 10px 20px;\r
+ }\r
+\r
+ </style>\r
+</head>\r
+<body>\r
+ <h1 class="samples">\r
+ <a href="../../../samples/old/index.html">CKEditor Samples</a> » Code Snippet Plugin\r
+ </h1>\r
+ <div class="warning deprecated">\r
+ 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
+ </div>\r
+\r
+ <div class="description">\r
+ <p>\r
+ This editor is using the <strong><a href="http://ckeditor.com/addon/codesnippet">Code Snippet</a></strong> plugin which introduces beautiful code snippets.\r
+ By default the <code>codesnippet</code> plugin depends on the built-in client-side syntax highlighting\r
+ library <a href="http://highlightjs.org">highlight.js</a>.\r
+ </p>\r
+ <p>\r
+ 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
+ (see <a href="http://highlightjs.org/static/test.html">available themes</a>).\r
+ </p>\r
+ <p>\r
+ Select theme: <select id="select"></select>\r
+ </p>\r
+ <p>\r
+ The CKEditor instance below was created by using the following configuration settings:\r
+ </p>\r
+\r
+<pre class="samples" id="sampleConfig">\r
+CKEDITOR.replace( 'editor1', {\r
+ <strong>extraPlugins: 'codesnippet',</strong>\r
+ codeSnippet_theme: 'monokai_sublime'\r
+} );\r
+</pre>\r
+\r
+ <p id="ie8-warning">\r
+ Please note that this plugin is not compatible with Internet Explorer 8.\r
+ </p>\r
+ </div>\r
+\r
+ <textarea id="editor1">\r
+<p>JavaScript code:</p>\r
+\r
+<pre>\r
+<code class="language-javascript">function isEmpty( object ) {\r
+ for ( var i in object ) {\r
+ if ( object.hasOwnProperty( i ) )\r
+ return false;\r
+ }\r
+ return true;\r
+}</code></pre>\r
+\r
+<p>SQL query:</p>\r
+\r
+<pre>\r
+<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
+\r
+<p>Unknown markup:</p>\r
+\r
+<pre>\r
+<code> ________________\r
+/ \\r
+| How about moo? | ^__^\r
+\________________/ (oo)\_______\r
+ \ (__)\ )\/\\r
+ ||----w |\r
+ || ||\r
+</code></pre>\r
+ </textarea>\r
+\r
+ <h2>Inline editor</h2>\r
+\r
+ <div class="description">\r
+ <p>\r
+ The following sample shows the <strong>Code Snippet</strong> plugin running inside\r
+ an inline CKEditor instance. The CKEditor instance below was created by using the following configuration settings:\r
+ </p>\r
+\r
+<pre class="samples">\r
+CKEDITOR.inline( 'editable', {\r
+ <strong>extraPlugins: 'codesnippet'</strong>\r
+} );\r
+</pre>\r
+\r
+ <p>\r
+ <strong>Note</strong>: The <a href="http://highlightjs.org/static/test.html">highlight.js themes</a>\r
+ must be loaded manually to be applied inside an inline editor instance, as the\r
+ <code>codeSnippet_theme</code> setting will not work in that case.\r
+ You need to include the stylesheet in the <code><head></code> section of the page, for example:\r
+ </p>\r
+\r
+<pre class="samples">\r
+<head>\r
+ ...\r
+ <link href="path/to/highlight.js/styles/monokai_sublime.css" rel="stylesheet">\r
+</head>\r
+</pre>\r
+\r
+ </div>\r
+\r
+ <div id="editable" contenteditable="true">\r
+\r
+<p>JavaScript code:</p>\r
+\r
+<pre><code class="language-javascript">function isEmpty( object ) {\r
+ for ( var i in object ) {\r
+ if ( object.hasOwnProperty( i ) )\r
+ return false;\r
+ }\r
+ return true;\r
+}</code></pre>\r
+\r
+<p>SQL query:</p>\r
+\r
+<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
+\r
+<p>Unknown markup:</p>\r
+\r
+<pre><code> ________________\r
+/ \\r
+| How about moo? | ^__^\r
+\________________/ (oo)\_______\r
+ \ (__)\ )\/\\r
+ ||----w |\r
+ || ||\r
+</code></pre>\r
+ </div>\r
+\r
+ <h2>Server-side Highlighting and Custom Highlighting Engines</h2>\r
+\r
+ <p>\r
+ The <a href="http://ckeditor.com/addon/codesnippetgeshi"><strong>Code Snippet GeSHi</strong></a> plugin is an\r
+ extension of the <strong>Code Snippet</strong> plugin which uses a server-side highligter.\r
+ </p>\r
+\r
+ <p>\r
+ It also is possible to replace the default highlighter with any library using\r
+ the <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.codesnippet.highlighter">Highlighter API</a>\r
+ and the <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.codesnippet-method-setHighlighter"><code>editor.plugins.codesnippet.setHighlighter()</code></a> method.\r
+ </p>\r
+\r
+ <script>\r
+ ( function() {\r
+ CKEDITOR.disableAutoInline = true;\r
+\r
+ var config = {\r
+ extraPlugins: 'codesnippet',\r
+ toolbar: [\r
+ [ 'Source' ], [ 'Undo', 'Redo' ], [ 'Bold', 'Italic', 'Underline' ], [ 'CodeSnippet' ]\r
+ ],\r
+ codeSnippet_theme: 'monokai_sublime',\r
+ height: 400\r
+ };\r
+\r
+ CKEDITOR.replace( 'editor1', config );\r
+\r
+ CKEDITOR.inline( 'editable', CKEDITOR.tools.extend( {}, config, {\r
+ extraPlugins: 'codesnippet'\r
+ }, true ) );\r
+\r
+ initThemeChange();\r
+\r
+ function initThemeChange() {\r
+ var templates = [\r
+ '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
+ ],\r
+ pre = CKEDITOR.document.getById( 'sampleConfig' ),\r
+ select = CKEDITOR.document.getById( 'select' ),\r
+ codeTemplate = 'CKEDITOR.replace( \'editor1\', {\n' +\r
+ ' <strong>extraPlugins: \'codesnippet\',</strong>\n' +\r
+ ' codeSnippet_theme: \'{tpl}\'\n' +\r
+ '} );',\r
+ name, option;\r
+\r
+ while ( ( name = templates.shift() ) ) {\r
+ option = CKEDITOR.document.createElement( 'option', {\r
+ attributes: {\r
+ value: name\r
+ }\r
+ } );\r
+\r
+ option.setText( name );\r
+ select.append( option );\r
+ }\r
+\r
+ select.$.onchange = function() {\r
+ if ( CKEDITOR.instances.editor1 )\r
+ CKEDITOR.instances.editor1.destroy();\r
+\r
+ CKEDITOR.replace( 'editor1', CKEDITOR.tools.extend( {}, config, {\r
+ codeSnippet_theme: this.value\r
+ }, true ) );\r
+\r
+ pre.setHtml( codeTemplate.replace( '{tpl}', this.value ) );\r
+ };\r
+ }\r
+\r
+ if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 )\r
+ CKEDITOR.document.getById( 'ie8-warning' ).addClass( 'warning' );\r
+ }() );\r
+ </script>\r
+\r
+ <div id="footer">\r
+ <hr>\r
+ <p>\r
+ CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
+ </p>\r
+ <p id="copy">\r
+ Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
+ Knabben. All rights reserved.\r
+ </p>\r
+ </div>\r
+</body>\r
+</html>\r
git://repos.xcallymotion.com / motion.git / blobdiff