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.

You might also like

List all top best Javascript Syntax Highlighters framework collections

September 21, 2019

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