public/assets/plugins/ckeditor/samples/old/codesnippet/codesnippet.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
   4 For licensing, see LICENSE.md or http://ckeditor.com/license
   5 -->
   6 <html>
   7 <head>
   8         <meta charset="utf-8">
   9         <title>Code Snippet &mdash; CKEditor Sample</title>
  10         <script src="../../../ckeditor.js"></script>
  11         <link href="../../../samples/old/sample.css" rel="stylesheet">
  12         <link href="../../../plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" rel="stylesheet">
  13         <meta name="ckeditor-sample-name" content="Code Snippet plugin">
  14         <meta name="ckeditor-sample-group" content="Plugins">
  15         <meta name="ckeditor-sample-description" content="View and modify code using the Code Snippet plugin.">
  16         <meta name="ckeditor-sample-isnew" content="1">
  17         <style>
  18
  19                 #editable
  20                 {
  21                         padding: 10px 20px;
  22                 }
  23
  24         </style>
  25 </head>
  26 <body>
  27         <h1 class="samples">
  28                 <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Code Snippet Plugin
  29         </h1>
  30         <div class="warning deprecated">
  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>.
  32         </div>
  33
  34         <div class="description">
  35                 <p>
  36                         This editor is using the <strong><a href="http://ckeditor.com/addon/codesnippet">Code Snippet</a></strong> plugin which introduces beautiful code snippets.
  37                         By default the <code>codesnippet</code> plugin depends on the built-in client-side syntax highlighting
  38                         library <a href="http://highlightjs.org">highlight.js</a>.
  39                 </p>
  40                 <p>
  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
  42                         (see <a href="http://highlightjs.org/static/test.html">available themes</a>).
  43                 </p>
  44                 <p>
  45                         Select theme: <select id="select"></select>
  46                 </p>
  47                 <p>
  48                         The CKEditor instance below was created by using the following configuration settings:
  49                 </p>
  50
  51 <pre class="samples" id="sampleConfig">
  52 CKEDITOR.replace( 'editor1', {
  53         <strong>extraPlugins: 'codesnippet',</strong>
  54         codeSnippet_theme: 'monokai_sublime'
  55 } );
  56 </pre>
  57
  58                 <p id="ie8-warning">
  59                         Please note that this plugin is not compatible with Internet Explorer 8.
  60                 </p>
  61         </div>
  62
  63         <textarea id="editor1">
  64 &lt;p&gt;JavaScript code:&lt;/p&gt;
  65
  66 &lt;pre&gt;
  67 &lt;code class="language-javascript"&gt;function isEmpty( object ) {
  68         for ( var i in object ) {
  69                 if ( object.hasOwnProperty( i ) )
  70                         return false;
  71         }
  72         return true;
  73 }&lt;/code&gt;&lt;/pre&gt;
  74
  75 &lt;p&gt;SQL query:&lt;/p&gt;
  76
  77 &lt;pre&gt;
  78 &lt;code class="language-sql"&gt;SELECT cust.id FROM cust LEFT JOIN loc ON ( cust.loc_id = loc.id ) WHERE cust.type IN ( 1, 2 );&lt;/code&gt;&lt;/pre&gt;
  79
  80 &lt;p&gt;Unknown markup:&lt;/p&gt;
  81
  82 &lt;pre&gt;
  83 &lt;code&gt; ________________
  84 /                \
  85 | How about moo? |  ^__^
  86 \________________/  (oo)\_______
  87                   \ (__)\       )\/\
  88                         ||----w |
  89                         ||     ||
  90 &lt;/code&gt;&lt;/pre&gt;
  91         </textarea>
  92
  93         <h2>Inline editor</h2>
  94
  95         <div class="description">
  96                 <p>
  97                         The following sample shows the <strong>Code Snippet</strong> plugin running inside
  98                         an inline CKEditor instance. The CKEditor instance below was created by using the following configuration settings:
  99                 </p>
 100
 101 <pre class="samples">
 102 CKEDITOR.inline( 'editable', {
 103         <strong>extraPlugins: 'codesnippet'</strong>
 104 } );
 105 </pre>
 106
 107                 <p>
 108                         <strong>Note</strong>: The <a href="http://highlightjs.org/static/test.html">highlight.js themes</a>
 109                         must be loaded manually to be applied inside an inline editor instance, as the
 110                         <code>codeSnippet_theme</code> setting will not work in that case.
 111                         You need to include the stylesheet in the <code>&lt;head&gt;</code> section of the page, for example:
 112                 </p>
 113
 114 <pre class="samples">
 115 &lt;head&gt;
 116         ...
 117         &lt;link href="path/to/highlight.js/styles/monokai_sublime.css" rel="stylesheet"&gt;
 118 &lt;/head&gt;
 119 </pre>
 120
 121         </div>
 122
 123         <div id="editable" contenteditable="true">
 124
 125 <p>JavaScript code:</p>
 126
 127 <pre><code class="language-javascript">function isEmpty( object ) {
 128         for ( var i in object ) {
 129                 if ( object.hasOwnProperty( i ) )
 130                         return false;
 131         }
 132         return true;
 133 }</code></pre>
 134
 135 <p>SQL query:</p>
 136
 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>
 138
 139 <p>Unknown markup:</p>
 140
 141 <pre><code> ________________
 142 /                \
 143 | How about moo? |  ^__^
 144 \________________/  (oo)\_______
 145                   \ (__)\       )\/\
 146                         ||----w |
 147                         ||     ||
 148 </code></pre>
 149         </div>
 150
 151         <h2>Server-side Highlighting and Custom Highlighting Engines</h2>
 152
 153         <p>
 154                 The <a href="http://ckeditor.com/addon/codesnippetgeshi"><strong>Code Snippet GeSHi</strong></a> plugin is an
 155                 extension of the <strong>Code Snippet</strong> plugin which uses a server-side highligter.
 156         </p>
 157
 158         <p>
 159                 It also is possible to replace the default highlighter with any library using
 160                 the <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.codesnippet.highlighter">Highlighter API</a>
 161                 and the <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.codesnippet-method-setHighlighter"><code>editor.plugins.codesnippet.setHighlighter()</code></a> method.
 162         </p>
 163
 164         <script>
 165                 ( function() {
 166                         CKEDITOR.disableAutoInline = true;
 167
 168                         var config = {
 169                                 extraPlugins: 'codesnippet',
 170                                 toolbar: [
 171                                         [ 'Source' ], [ 'Undo', 'Redo' ], [ 'Bold', 'Italic', 'Underline' ], [ 'CodeSnippet' ]
 172                                 ],
 173                                 codeSnippet_theme: 'monokai_sublime',
 174                                 height: 400
 175                         };
 176
 177                         CKEDITOR.replace( 'editor1', config );
 178
 179                         CKEDITOR.inline( 'editable', CKEDITOR.tools.extend( {}, config, {
 180                                 extraPlugins: 'codesnippet'
 181                         }, true ) );
 182
 183                         initThemeChange();
 184
 185                         function initThemeChange() {
 186                                 var templates = [
 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'
 188                                         ],
 189                                         pre = CKEDITOR.document.getById( 'sampleConfig' ),
 190                                         select = CKEDITOR.document.getById( 'select' ),
 191                                         codeTemplate = 'CKEDITOR.replace( \'editor1\', {\n' +
 192                                                 '       <strong>extraPlugins: \'codesnippet\',</strong>\n' +
 193                                                 '       codeSnippet_theme: \'{tpl}\'\n' +
 194                                         '} );',
 195                                         name, option;
 196
 197                                 while ( ( name = templates.shift() ) ) {
 198                                         option = CKEDITOR.document.createElement( 'option', {
 199                                                 attributes: {
 200                                                         value: name
 201                                                 }
 202                                         } );
 203
 204                                         option.setText( name );
 205                                         select.append( option );
 206                                 }
 207
 208                                 select.$.onchange = function() {
 209                                         if ( CKEDITOR.instances.editor1 )
 210                                                 CKEDITOR.instances.editor1.destroy();
 211
 212                                         CKEDITOR.replace( 'editor1', CKEDITOR.tools.extend( {}, config, {
 213                                                 codeSnippet_theme: this.value
 214                                         }, true ) );
 215
 216                                         pre.setHtml( codeTemplate.replace( '{tpl}', this.value ) );
 217                                 };
 218                         }
 219
 220                         if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 )
 221                                 CKEDITOR.document.getById( 'ie8-warning' ).addClass( 'warning' );
 222                 }() );
 223         </script>
 224
 225         <div id="footer">
 226                 <hr>
 227                 <p>
 228                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
 229                 </p>
 230                 <p id="copy">
 231                         Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
 232                         Knabben. All rights reserved.
 233                 </p>
 234         </div>
 235 </body>
 236 </html>