Markdown Editor

Split-pane markdown editor: write on the left, see the rendered result on the right. Supports math, diagrams, code highlighting, and all the extended markdown features I kept needing in other editors.

Key Features

Tables, footnotes, task lists, LaTeX math (KaTeX), and Mermaid/PlantUML diagrams on top of standard markdown. Syntax highlighting for 100+ languages, one-click code copying, focus mode, auto-save, scroll sync, dark mode, and it works offline as a PWA.

Technical Implementation

Built with Nuxt 3, Vue 3 Composition API, and TypeScript. Uses markdown-it for processing, KaTeX for math, Mermaid for diagrams, shadcn-vue for UI, and TailwindCSS for styling.

Performance

• Lazy loading for heavy dependencies
• Debounced preview updates
• Vue reactivity for efficient DOM updates
• Service worker for offline use

Use Cases

Works well for technical docs, academic writing with math formulas, project planning with task lists and diagrams, blog posts, or just quick notes.