Code Editor

---

Code Editor, Read-Only, Bootstrap

	<!-- Code contents to be placed here -->
        

Class Reference

JS Einstellungen	Erklärung
readOnly: true	der Code Editor ist nicht editierbar
lineNumbers: true|false	die Nummerierung wird ein/ausgeblendet

Source Code

<!-- Code Editor -->
<div id="code" class="bd mg-b-50"></div>

<!-- Code Editor Bootstrap -->
<pre><code class="html pd-10">
    contents
</code></pre>

<script>
$(function(){
'use strict';

var initValue = '$(\'#btnLeftMenu\').on(\'click\', function(){\n  var menuText = $(\'.menu-item-label,.menu-item-arrow\');\n\n  if($(\'body\').hasClass(\'collapsed-menu\')) {\n    $(\'body\').removeClass(\'collapsed-menu\');\n\n    // show current sub menu when reverting back from collapsed menu\n    $(\'.show-sub + .br-menu-sub\').slideDown();\n\n    $(\'.br-sideleft\').one(\'transitionend\', function(e) {\n      menuText.removeClass(\'op-lg-0-force\');\n      menuText.removeClass(\'d-lg-none\');\n    });\n\n  } else {\n    $(\'body\').addClass(\'collapsed-menu\');\n\n    // hide toggled sub menu\n    $(\'.show-sub + .br-menu-sub\').slideUp();\n\n    menuText.addClass(\'op-lg-0-force\');\n    $(\'.br-sideleft\').one(\'transitionend\', function(e) {\n      menuText.addClass(\'d-lg-none\');\n    });\n  }\n  return false;\n});';

   var myCodeMirror = CodeMirror(document.getElementById('code'), {
       lineNumbers: true,
       theme: 'eclipse',
       mode: 'javascript',
       value: initValue,
       scrollbarStyle: 'simple',
       readOnly: true
    });
});
</script>