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

   1 <!DOCTYPE html>\r
   2 <!--\r
   3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r
   4 For licensing, see LICENSE.md or http://ckeditor.com/license\r
   5 -->\r
   6 <html>\r
   7 <head>\r
   8         <meta charset="utf-8">\r
   9         <title>Code Snippet &mdash; 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
  17         <style>\r
  18 \r
  19                 #editable\r
  20                 {\r
  21                         padding: 10px 20px;\r
  22                 }\r
  23 \r
  24         </style>\r
  25 </head>\r
  26 <body>\r
  27         <h1 class="samples">\r
  28                 <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Code Snippet Plugin\r
  29         </h1>\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
  32         </div>\r
  33 \r
  34         <div class="description">\r
  35                 <p>\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
  39                 </p>\r
  40                 <p>\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
  43                 </p>\r
  44                 <p>\r
  45                         Select theme: <select id="select"></select>\r
  46                 </p>\r
  47                 <p>\r
  48                         The CKEditor instance below was created by using the following configuration settings:\r
  49                 </p>\r
  50 \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
  55 } );\r
  56 </pre>\r
  57 \r
  58                 <p id="ie8-warning">\r
  59                         Please note that this plugin is not compatible with Internet Explorer 8.\r
  60                 </p>\r
  61         </div>\r
  62 \r
  63         <textarea id="editor1">\r
  64 &lt;p&gt;JavaScript code:&lt;/p&gt;\r
  65 \r
  66 &lt;pre&gt;\r
  67 &lt;code class="language-javascript"&gt;function isEmpty( object ) {\r
  68         for ( var i in object ) {\r
  69                 if ( object.hasOwnProperty( i ) )\r
  70                         return false;\r
  71         }\r
  72         return true;\r
  73 }&lt;/code&gt;&lt;/pre&gt;\r
  74 \r
  75 &lt;p&gt;SQL query:&lt;/p&gt;\r
  76 \r
  77 &lt;pre&gt;\r
  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;\r
  79 \r
  80 &lt;p&gt;Unknown markup:&lt;/p&gt;\r
  81 \r
  82 &lt;pre&gt;\r
  83 &lt;code&gt; ________________\r
  84 /                \\r
  85 | How about moo? |  ^__^\r
  86 \________________/  (oo)\_______\r
  87                   \ (__)\       )\/\\r
  88                         ||----w |\r
  89                         ||     ||\r
  90 &lt;/code&gt;&lt;/pre&gt;\r
  91         </textarea>\r
  92 \r
  93         <h2>Inline editor</h2>\r
  94 \r
  95         <div class="description">\r
  96                 <p>\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
  99                 </p>\r
 100 \r
 101 <pre class="samples">\r
 102 CKEDITOR.inline( 'editable', {\r
 103         <strong>extraPlugins: 'codesnippet'</strong>\r
 104 } );\r
 105 </pre>\r
 106 \r
 107                 <p>\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>&lt;head&gt;</code> section of the page, for example:\r
 112                 </p>\r
 113 \r
 114 <pre class="samples">\r
 115 &lt;head&gt;\r
 116         ...\r
 117         &lt;link href="path/to/highlight.js/styles/monokai_sublime.css" rel="stylesheet"&gt;\r
 118 &lt;/head&gt;\r
 119 </pre>\r
 120 \r
 121         </div>\r
 122 \r
 123         <div id="editable" contenteditable="true">\r
 124 \r
 125 <p>JavaScript code:</p>\r
 126 \r
 127 <pre><code class="language-javascript">function isEmpty( object ) {\r
 128         for ( var i in object ) {\r
 129                 if ( object.hasOwnProperty( i ) )\r
 130                         return false;\r
 131         }\r
 132         return true;\r
 133 }</code></pre>\r
 134 \r
 135 <p>SQL query:</p>\r
 136 \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
 138 \r
 139 <p>Unknown markup:</p>\r
 140 \r
 141 <pre><code> ________________\r
 142 /                \\r
 143 | How about moo? |  ^__^\r
 144 \________________/  (oo)\_______\r
 145                   \ (__)\       )\/\\r
 146                         ||----w |\r
 147                         ||     ||\r
 148 </code></pre>\r
 149         </div>\r
 150 \r
 151         <h2>Server-side Highlighting and Custom Highlighting Engines</h2>\r
 152 \r
 153         <p>\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
 156         </p>\r
 157 \r
 158         <p>\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
 162         </p>\r
 163 \r
 164         <script>\r
 165                 ( function() {\r
 166                         CKEDITOR.disableAutoInline = true;\r
 167 \r
 168                         var config = {\r
 169                                 extraPlugins: 'codesnippet',\r
 170                                 toolbar: [\r
 171                                         [ 'Source' ], [ 'Undo', 'Redo' ], [ 'Bold', 'Italic', 'Underline' ], [ 'CodeSnippet' ]\r
 172                                 ],\r
 173                                 codeSnippet_theme: 'monokai_sublime',\r
 174                                 height: 400\r
 175                         };\r
 176 \r
 177                         CKEDITOR.replace( 'editor1', config );\r
 178 \r
 179                         CKEDITOR.inline( 'editable', CKEDITOR.tools.extend( {}, config, {\r
 180                                 extraPlugins: 'codesnippet'\r
 181                         }, true ) );\r
 182 \r
 183                         initThemeChange();\r
 184 \r
 185                         function initThemeChange() {\r
 186                                 var templates = [\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
 188                                         ],\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
 194                                         '} );',\r
 195                                         name, option;\r
 196 \r
 197                                 while ( ( name = templates.shift() ) ) {\r
 198                                         option = CKEDITOR.document.createElement( 'option', {\r
 199                                                 attributes: {\r
 200                                                         value: name\r
 201                                                 }\r
 202                                         } );\r
 203 \r
 204                                         option.setText( name );\r
 205                                         select.append( option );\r
 206                                 }\r
 207 \r
 208                                 select.$.onchange = function() {\r
 209                                         if ( CKEDITOR.instances.editor1 )\r
 210                                                 CKEDITOR.instances.editor1.destroy();\r
 211 \r
 212                                         CKEDITOR.replace( 'editor1', CKEDITOR.tools.extend( {}, config, {\r
 213                                                 codeSnippet_theme: this.value\r
 214                                         }, true ) );\r
 215 \r
 216                                         pre.setHtml( codeTemplate.replace( '{tpl}', this.value ) );\r
 217                                 };\r
 218                         }\r
 219 \r
 220                         if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 )\r
 221                                 CKEDITOR.document.getById( 'ie8-warning' ).addClass( 'warning' );\r
 222                 }() );\r
 223         </script>\r
 224 \r
 225         <div id="footer">\r
 226                 <hr>\r
 227                 <p>\r
 228                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
 229                 </p>\r
 230                 <p id="copy">\r
 231                         Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
 232                         Knabben. All rights reserved.\r
 233                 </p>\r
 234         </div>\r
 235 </body>\r
 236 </html>\r