CodeMirror: Everything you need to know about CodeMirror!

What is { } CodeMirror?

What is CodeMirror? What is it used for?

According to CodeMirror.net:

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.

…basically CodeMirror is a beautiful Text Editor that can be easily integrated into your own web apps and electron projects! CodeMirror supports multiple themes, languages and configurations out of the box! Heck! You can provide custom themes and language support as well!

In the following tutorial, you’ll learn how to install and add CodeMirror to your project and easily configure it to make it your own!

History: Who created it, when was it created?

The first official release of CodeMirror was around 10 years ago roughly on 30th May 2009, and its open-source code is available on GitHub. CodeMirror has had multiple contributors that have contributed to each version of CodeMirror.

Installation 👾

You can either get the [zip file] with the latest version

OR

or make sure you have Node installed and in the command line run:

npm install codemirror

This should install all the necessary files required to add CodeMirror to your custom web apps! All the installed files are located in the node_modules/codemirror directory!

Hook CodeMirror into your project 🧶

Now as we’ve successfully setup CodeMirror, let us hook the editor into our webpage. CodeMirror actually works on top of a <textarea> element of your web document.

In your document wherever you want the editor to be located insert a <textarea> element like so:

<textarea id=”editor”></textarea>

Now in your javascript file just add:

let cm = new CodeMirror();

This will attach CodeMirror to the first <textarea> element it finds in the document. if you want to attach CodeMirror to a custom <textarea> element instead of the above code insert the following code:

let cm = new CodeMirror.fromTextArea(document.findElementById("editor"));

and Congratulations you have your very own text editor inside your web app! You can configure it in any way you like by passing a configuration object as the second parameter like so:

var cm = new CodeMirror.fromTextArea(document.getElementById("editor"), {lineNumbers: true});

Yes, this one line was enough to provide line numbers to your editor! By now your codemirror editor should somewhat look like this -

CodeMirror with line numbers enabled

Configurations 🧩

CodeMirror supports a wide variety of configurations. Some of its prominent configuration options are discussed below!

1. value: (accepts a string or CodeMirror.Doc) The starting value of the editor. This can be a string or a document object.
2. mode: (accepts a string or an object) The mode to use (like “javascript”, “java”, “ruby”. When not given, this will default to the first mode that was loaded. It may be a string, which either simply names the mode or is a MIME type associated with the mode. The value null indicates no highlighting should be applied. Alternatively, it may be an object containing configuration options for the mode, with a name property that names the mode. (for example mode: {name: "javascript", json: true}). The demo pages for each mode contain information about what configuration parameters the mode supports. You can check out the code mirror website to know more about all the modes that are supported by the editor.
3. lineSeparator: (accepts string) Explicitly set the line separator for the editor. By default (null), the document will be split on CRLFs as well as lone CRs and LFs.
4. indentUnit: (accepts an integer) How many spaces a block (whatever that means in the edited language) should be indented. The default is 2.
5. tabSize: (accepts an integer) The width of a tab character. Defaults to 4.

there are dozens of configuration options to choose from. head out to the codemirror website to know more….

One cool configuration option I purposefully left out is “theming”. Yes CodeMirror supports theming as well!; But before adding themes make sure you include the correct css theme files in your project. It can be found in [node_modules]/codemirror/theme/[theme-name].css.

{theme: "[theme-name]"}

Modes can be found in [node_modules]/codemirror/mode/[mode-name]/[mode-name].js.

here is the editor with the mode set to “javascript” and theme set to “dracula”.

CodeMirror with dracula theme enabled

You can always write your own custom modes for your own custom languages! to know more about custom modes head over to this link.

Who is using CodeMirror?

Many major code editors use CodeMirror in their projects! (Adobe Brackets is one major example) other examples include BlueGriffin (HTML editor), Cargo Collective(creative publishing platform), CodeBug, CodePen etc. In fact, CodeMirror is actually the editor used in the dev tools for Firefox, Chrome, and Safari, in Light Table, Bitbucket, and many other projects.

Coder IDE Concept — Code Editor from dribbble.com

Congratulations! you now have your very own Text Editor that is used by many IT Giants! tweak it all to your liking and make it your own. you can dabble around with the CSS files to customise it as much as you want.

CodeMirror currently is undergoing breaking changes and is being re-written as codemirror 6. The new system aims to provide solid accessibility, touchscreen support, better content analysis, and a modern programming interface, while matching the existing code in features and performance. It will not be API-compatible with the old code.

not to make this article too long I’ll end it here…but there is so much more to cover in CodeMirror…you can even make your own text editing application using CodeMirror + electron!

This was my first medium article! If you loved it please drop some claps:) if you have any suggestions please feel free to write them here or email me directly :) you can also suggest help tutorials on any other technology or product!

If you have any questions regarding CodeMirror or how to set it up, you can ask them in the comments below! I'll try to answer them all as soon as time permits!

You can also follow me on Twitter at @iDevSebastian or email me directly. I’d love to hear from you!