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

1

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
2

Great project!

I love the idea to render them by line, instead of by blocks of wrappers as it is done in Obsidian. This make the layout shifts less annoying and clearly indicates what is edited and what is rendered.

1 Like