Introduction to CodeMirror - Effective Code and Markdown Editor

The Problem

input and textarea are two HTML tags that are used to collect user input. input is suitable for short input, while textarea is used for longer, multiline input. Later on, I learned about another way to collect user input using contenteditable. Unlike input and textarea, contenteditable allows direct editing of HTML code. This means that the content in contenteditable can be very diverse.

However, there is a limitation. The two tags mentioned above only allow users to input plain text. If you want to do something more with the content, such as formatting text, syntax highlighting, creating shortcuts, etc., it becomes a challenging problem. Therefore, using these tags alone makes it difficult to create a text editor with rich formatting capabilities. contenteditable allows more flexibility, but it adds a lot of HTML code, making it difficult to extract the user's input. Moreover, each browser implements contenteditable differently, making it sometimes hard to understand.

Because of these limitations, many Text Editor libraries were developed to provide powerful text editing and formatting features. Some notable names include TinyMCE, CKEditor, WYSIWYG, etc. These tools have beautiful and modern interfaces with toolbar support for text formatting, just like a real word processor. They are used in scenarios where the input requires more than just plain text, including formatting, layout, images, etc. Most of them output HTML code, which can be saved and rendered by the browser to display a fully formatted page.

While these tools are powerful, they didn't meet my simple need for a Markdown editor with a live preview feature. If you look at the mentioned libraries, you might find a few that also support Markdown. I have tried them, but they were unable to fulfill the requirements or only supported a subset of Markdown syntax.

I had a simple requirement: something lightweight, fast, with syntax highlighting and easy customization, meaning I could add additional features smoothly. During my research, I came across a strong contender called SimpleMDE.

SimpleMDE lives up to its name, providing a super "simple" Markdown editor with all the essential features I needed. However, while exploring SimpleMDE's API, I discovered a new name: CodeMirror. At that point, I realized that SimpleMDE might be using CodeMirror as its foundation. Further investigation confirmed that CodeMirror is a powerful Markdown editor in itself.

CodeMirror

CodeMirror is an open-source JavaScript library used to create source code editors in web applications. It provides an interactive user interface for writing and editing source code in various programming languages. CodeMirror supports crucial features like syntax highlighting, code autocompletion, error checking, flexible layout, and many others.

CodeMirror is commonly used in web-based projects such as source code editors for open-source websites, integrated development environments (IDEs), blog post editors with code support, and other web applications that require code editing capabilities.

There are several advantages of using CodeMirror that convinced me and many others to use it:

• Syntax Highlighting, Code Autocompletion, and Error Checking
• Easy customizability, including adding keybindings and customizing the interface
• A rich plugin ecosystem
• Cross-platform compatibility, which is crucial in avoiding browser compatibility issues
• Clear documentation, extensive API, and a large community

I am currently using CodeMirror in two places: a post editor in the Admin Control Panel and the comment section of my blog. Although they are not yet fully optimized, I have the ability to add or modify features as needed.

Implementation

Since CodeMirror is a JavaScript library, it can be easily integrated into any web page. If you are using a library like Vue, React, etc., there are packages available that turn CodeMirror into components for these libraries.

Here is an example of using CodeMirror for a simple Markdown editor:

import { basicSetup, EditorView } from "codemirror";
import { markdown } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";

let view = new EditorView({
  doc: "Hello\n\n```javascript\nlet x = 'y'\n```",  
  extensions: [
    basicSetup,  
    markdown({ codeLanguages: languages }),  
  ],  
  parent: document.body,  
});

You can explore more examples at Try CodeMirror. Additionally, CodeMirror provides specific examples for various use cases at Examples.