How To Setup Markdown using CodeMirror 6

I’ve been using CodeMirror on a side-project. Below is a small example of setting it up.

Add CodeMirror 6

npm install @codemirror/basic-setup
npm install @codemirror/lang-markdown

Markdown Editor

import { EditorState } from "@codemirror/state"
import { EditorView, drawSelection, highlightActiveLine, keymap } from "@codemirror/view"
import { indentWithTab } from "@codemirror/commands"
import { defaultKeymap } from '@codemirror/commands';
import { defaultHighlightStyle } from '@codemirror/highlight';

import { markdown } from '@codemirror/lang-markdown';

const initialState = EditorState.create({
    doc: "# Hello World",
    extensions: [
        keymap.of([indentWithTab]),
        drawSelection(),
        defaultHighlightStyle.fallback,
        highlightActiveLine(),
        markdown(),
        keymap.of([
            ...defaultKeymap,
        ])
    ],
});

const view = new EditorView({
    parent: document.getElementById('editor'),
    state: initialState,
});