Try Demo

A Simple CodeMirror and Remark Markdown Editor

Here is a simple CodeMirror 6 and Remark Markdown Editor, with syntax highlighting and a live preview, written in React, on CodeSandbox.

It uses React hooks, with useDebounce to make it so it only updates every few hundred milliseconds, and with a useImperativeHandle hook so it can provide its own interface to get the text from CodeMirror.

import React, { useState, useRef } from "react"; import { useDebouncedCallback } from "use-debounce"; import CodeEditor from "./CodeEditor"; import MarkdownView from "./MarkdownView"; import "./styles.css"; const example = `# Hello, World. Here is some M… (682 characters)

The CodeEditor and MarkdownView components are simplified versions of what we're using in the new web app we're building.