live-md

Live MD — a lightweight CodeMirror plugin for rich Markdown editing with math, images, and custom tag blocks.

Caution

⚠️ Archived — This repository has been archived and permanently moved to NeuroNexul/draftly. Please open issues and PRs there.

Overview

• Live, editable Markdown experience built on CodeMirror 6.
• Supports KaTeX rendering, fenced code decorations, image blocks, and custom block tags (Markdoc-like).
• Exports a small library package (live-md) suitable for use in web apps and frameworks.

Features

• Rich editing decorations for headings, lists, blockquotes and fenced code.
• Inline and block math support (KaTeX).
• Image block widget with alt/title extraction and inline preview.
• Custom block tags support via a Markdoc-style parser.

Quick install

• Install dependencies for the monorepo (pnpm workspace):

pnpm install

• Build everything (root workspace):

pnpm -w build

• Build only the live-md package:

pnpm --filter live-md build

Usage (basic)

• Example: create a CodeMirror editor and enable the plugin.

import { EditorView, EditorState } from "@codemirror/view";
import { basicSetup } from "@codemirror/basic-setup";
import liveMDPlugin from "live-md";

const state = EditorState.create({
	doc: "# Hello\n\nThis is live-md",
	extensions: [basicSetup, liveMDPlugin({ getNodes: nodes => console.log(nodes), lezer: { codeLanguages: [], extensions: [] } })]
});

const view = new EditorView({ state, parent: document.getElementById("app") });

API notes

• The default export is liveMDPlugin(config) which returns a CodeMirror ViewPlugin.
• config accepts:
  • lezer: optional lezer-related options (codeLanguages, extensions).
  • getNodes: callback (nodes: NodeType[]) => void that receives parsed nodes for tooling/inspection.
• The package also exports a katex.css asset (see package exports).

Development

• Watch & build the package locally:

pnpm --filter live-md dev

• Lint the package:

pnpm --filter live-md lint

Contributing

• Contributions welcome. Open issues and PRs on the repository.
• Follow the repo formatting and lint rules (see root package.json scripts).

License

• Check the repository or package metadata for license information before publishing or redistributing.

Where to look in the code

• Core entry: packages/live-md/src/index.ts
• Rich editing logic & decorations: packages/live-md/src/rich-edit.ts
• Custom parser for tags and math: packages/live-md/src/tagParser.ts

If you'd like, I can also add examples, screenshots, or a small demo app in apps/web.