Implementing Syntax Highlighter using Codemirror framework

This tutorial will explain how to implement syntax highlighter using CodeMirror framework. There are two ways to achieve syntax highlighter.

{loadposition position-9}

Below listed methods will bring the syntax highlighter in codemirror JavaScript framework.

1. Using codemirror runmode.js and colorize.js
2. Set the css property as “pointer-events: none” to “CodeMirror” css class name. (Support only for higher browser versions)

Before implementing the code, include all dependent files from codemirror framework

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/codemirror.min.css /> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/codemirror.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/addon/edit/matchbrackets.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/addon/runmode/runmode.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/addon/runmode/colorize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/mode/javascript/javascript.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/mode/xml/xml.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/mode/css/css.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/mode/htmlmixed/htmlmixed.min.js"></script>

Method 1: Using runmode.js and colorize.js

runmode.js

Below code will bring the syntax highlighter using runmode.js

Text to be highlight

<pre id="code">/* Some example CSS */  @import url("something.css");  body {   margin: 0;   padding: 3em 6em;   font-family: tahoma, arial, sans-serif;   color: #000; } .CodeMirror-linenumber {     padding: 0 3px 0 5px;     min-width: 20px;     text-align: right;     color: #999;     white-space: nowrap; }</pre>

Javascript code

<script>CodeMirror.runMode(document.getElementById("code").innerHTML, "text/css", document.getElementById("code")); document.getElementById("code").className += " cm-s-default";</script>

runmode.js Demo

colorize.js

Below code will bring the syntax highlighter using colorize.js. Colorize is depend on runmode.js file

Text to be highlight

<pre data-lang="text/css">/* Some example CSS */  @import url("something.css");  body {   margin: 0;   padding: 3em 6em;   font-family: tahoma, arial, sans-serif;   color: #000; } .CodeMirror-linenumber {     padding: 0 3px 0 5px;     min-width: 20px;     text-align: right;     color: #999;     white-space: nowrap; }</pre>

JavaScript code

<script>setTimeout(function(){CodeMirror.colorize();}, 20);</script>

colorize.js Demo

Note: runmode and colorize will not support linenumber

Method 2: Set the css property as “pointer-events: none”

Add the css property “pointer-events: none” to “CodeMirror” css class name. find the below code and demo

Text to be highlighted

<textarea id=demotext> <!-- Create a simple CodeMirror instance --> <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <script>   var editor = CodeMirror.fromTextArea(myTextarea, {     lineNumbers: true   }); </script></textarea>

JavaScript code

<script>     var editor = CodeMirror.fromTextArea(document.getElementById("demotext"), {       lineNumbers: true,       mode: "text/html",       matchBrackets: true     }); </script>

CSS code

<style>   .CodeMirror { height: auto; border: 1px solid #ddd; pointer-events: none;} </style>

Demo