Hybrid markdown editing (preview for unfocused lines, raw for active line)

Here’s an extension I’ve built for hybrid markdown editing: it renders the preview of unfocused lines while keeping the current line in raw markdown for editing (so you get readability without losing precise control).

demo

Install

npm install codemirror-markdown-hybrid @codemirror/state @codemirror/view

Minimal Usage

import { EditorState } from '@codemirror/state'
import { EditorView } from '@codemirror/view'
import { hybridMarkdown } from 'codemirror-markdown-hybrid'

const state = EditorState.create({
  doc: '# Hello World',
  extensions: [hybridMarkdown({ theme: 'light' })],
})

new EditorView({ state, parent: document.body })

This is my first extension, so all the feedback is welcomed.

1 Like