CodeMirror.js kick starter : a JSfiddle-clone in 50 lines.

CodeMirror is a JavaScript component providing a modern code editor in the browser. It has a rich programming API and a focus on extensibility.

6 min readAug 10, 2020

Objectives

Short run: Learn CodeMirror.js’ basics via a demo gathering the key features of a modern editor.
Long run: Explore modern editors for integration into Forkable project.

Principles

HTML :

<!-- Load relevant dependencies via script and style/link tags -->
<textarea id=”editor-html”>
<textarea id=”editor-css”>
<textarea id=”editor-js”>

JS :

var editorsSettings = {
  lineWrapping: true,
  lint: true,
  lineNumbers: true,
  foldGutter: true,
  gutters: ["CodeMirror-lint-markers","CodeMirror-linenumbers", "CodeMirror-foldgutter"],
  tabSize: 2,
  indentUnit: 2,
  matchBrackets: true
}// Editors HTML, CSS, JS : init, bind, define settings.
let editorHTML = CodeMirror.fromTextArea(document.querySelector('#editor-html'), {
  mode : "htmlmixed", // require modes for xml, css, js.
  htmlMode: true,
  ...editorsSettings
});
let editorCSS = CodeMirror.fromTextArea(document.querySelector('#editor-css'), {
  mode: 'text/css',
  ...editorsSettings
});
let editorJS = CodeMirror.fromTextArea(document.querySelector('#editor-js'), {
  mode: 'text/javascript',
  ...editorsSettings
});// Fetch and organize into preview
let updatePreview = function() {
  let preview = document.querySelector('#preview');
  let previewDocument = preview.contentDocument || preview.contentWindow.document;
  previewDocument.open();
  previewDocument.write(editorHTML.getValue());
  previewDocument.write("<script>"+editorJS.getValue()+"<"+"/script>");
  previewDocument.close();
  previewDocument.querySelector('head').innerHTML = '<style>' + editorCSS.getValue() + '</style>';
}

Demo

Most features require to add in the .html file a external js resources via script tag, and occasionally its css complement. JS is short. The editor’s settings object also generally have to be edited accordingly.

Click the “Result” tab to see the JSfiddle-clode’s HTML, CSS, JS editor pads and associated preview.

Features

Demo itself, a kick starter :

modern editor :
- multi-cursors
- syntax highlighting
- line numbering
- code linters
- code folding
multiple editors pads : HTML, CSS, JS.
live preview : reuse of edited contents into larger result.
extra keys : possibility of custom shortcuts firing a js function. ❤

CodeMirror is also :

auto-completion
flexible :
- themes (50)
- addons (browse)
- languages (129), called modes
and many more.

Interesting features

# Interesting for my explorations
doc.eachLine(start: integer, end: integer, f: (line: LineHandle))
   Iterate lines a document from a start line to an end line. 
   Content has a .text property with text content
doc.markText(from: {line, ch}, to: {line, ch}, ?options: object)
   options includes: { className: "a_CSS_class" }

Themes

List: https://codemirror.net/theme/
Integration: change elegant by the theme of your preference.

<!-- HTML: -->
<link href="//codemirror.net/theme/elegant.css" rel="stylesheet">
<!-- JS:   -->
// when configuring the editor object, add :
...
theme: 'elegant',
...