Introduction to CodeMirror - Effective Code and Markdown Editor

Introduction to CodeMirror - Effective Code and Markdown Editor

Daily short news for you
  • Manus has officially opened its doors to all users. For those who don't know, this is a reporting tool (making waves) similar to OpenAI's Deep Research. Each day, you get 300 free Credits for research. Each research session consumes Credits depending on the complexity of the request. Oh, and they seem to have a program giving away free Credits. I personally saw 2000 when I logged in.

    I tried it out and compared it with the same command I used before on Deep Research, and the content was completely different. Manus reports more like writing essays compared to OpenAI, which uses bullet points and tables.

    Oh, after signing up, you have to enter your phone number for verification; if there's an error, just wait until the next day and try again.

    » Read more
  • I just found a quite interesting website talking about the memorable milestones in the history of the global Internet: Internet Artifacts

    Just from 1977 - when the Internet was still in the lab - look how much the Internet has developed now 🫣

    » Read more
  • Just thinking that a server "hiding" behind Cloudflare is safe, but that’s not necessarily true; nothing is absolutely safe in this Internet world. I invite you to read the article CloudFlair: Bypassing Cloudflare using Internet-wide scan data to see how the author discovered the IP address of the server that used Cloudflare.

    It's quite impressive, really; no matter what, there will always be those who strive for security and, conversely, those who specialize in exploiting vulnerabilities and... blogging 🤓

    » Read more

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.

Sample editor

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.

Premium
Hello

Me & the desire to "play with words"

Have you tried writing? And then failed or not satisfied? At 2coffee.dev we have had a hard time with writing. Don't be discouraged, because now we have a way to help you. Click to become a member now!

Have you tried writing? And then failed or not satisfied? At 2coffee.dev we have had a hard time with writing. Don't be discouraged, because now we have a way to help you. Click to become a member now!

View all

Subscribe to receive new article notifications

or
* The summary newsletter is sent every 1-2 weeks, cancel anytime.

Comments (0)

Leave a comment...