Building a Code Editor with CodeMirror

CodeMirror is a popular text editor component for the web. It has some neat features that make it easy to build online code editors, like syntax highlighting, gutters, and keyboard shortcuts. It has support for many editing features, and has a rich programming interface to allow further extension.

Steps to implement it

1. Add CodeMirror from a CDN
The easiest way to set up CodeMirror is via <script> tag from a CDN

<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css"/>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js">
</script>

2. Initialize CodeMirror instance
Once you import CodeMirror via <script> tag, you get a CodeMirror global that you can use to create a new CodeMirror instance. Just point it at a <textarea> and CodeMirror does the rest.

//Note: source-code is id of textarea 
$('#source-code').val(
`// This is just a sample script. 
//Paste your real code (javascript or HTML) here.
if ('this_is' == /an_example/) {
    brightenminds();
} else {
    var a = b ? (c % d) : e[f];
}`
);
<script>
	var editor = CodeMirror.fromTextArea(document.getElementById("source-code"), {
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true
    })
</script>

CodeMirror will look like below when you run it.
Note: CodeMirror automatically supports shortcuts like "undo", so if you type and then hit Ctrl + Z

3. Syntax Highlighting
Let's add JavaScript syntax highlighting so CodeMirror doesn't render the JavaScript code as plain text. To enable JavaScript syntax highlighting, first you need to import the JavaScript language mode, which is a separate file.

<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js">
</script>

You also need to set the mode option to 'JavaScript' in your constructor.

var editor = CodeMirror.fromTextArea(document.getElementById("source-code"), {
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true,
        mode: 'javascript'
      })

Below is a live example of a CodeMirror instance with JavaScript syntax highlighting:

4. Theme
Next, let's add a CodeMirror theme. Here's a full list of built-in themes for CodeMirror.
To include the Darcula theme, you first need to pull in the Darcula CSS file:

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/darcula.min.css"/>

Next, just set the theme option to the CodeMirror constructor to the theme name.

var editor = CodeMirror.fromTextArea(document.getElementById("source-code"), {
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true,
        mode: 'javascript',
        theme: 'darcula'
      })

Below is a live example of a Darcula CodeMirror.

Complete Code

  
    <meta content="width=device-width" name="viewport"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css" rel="stylesheet"/>
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/darcula.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js" type="text/javascript"></script>

    
  
  
    

      

        

          

            

              
            
          
        
      
    
    <script>
      $('#source-code').val(
`// This is just a sample script. 
//Paste your real code (javascript or HTML) here.
if ('this_is' == /an_example/) {
    brightenminds();
} else {
    var a = b ? (c % d) : e[f];
}`
);
      var editor = CodeMirror.fromTextArea(document.getElementById("source-code"), {
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true,
        mode: 'javascript',
        theme: 'darcula'
      })
    </script>
  

Code Repo

• Git File Link