Quartz — Clear Markdown Editor for VS Code

A Notion-style block-based WYSIWYG markdown editor that lives inside VS Code. Edit .md files visually while keeping them as standard CommonMark + GFM markdown.

Features

• Block-based editing — Every paragraph, heading, list, and code block is a draggable block
• Slash commands — Type / to insert any block type
• Keyboard shortcuts — Cmd+B for bold, Cmd+I for italic, and more
• Round-trip fidelity — Your markdown formatting is preserved when you save
• Callouts — 8 Obsidian-style admonition types (> [!note], > [!warning], etc.) with collapsible content and custom titles
• Frontmatter — Collapsible YAML frontmatter banner with raw editing
• AI agent compatible — Editor auto-refreshes when external tools (Claude Code, Cursor, Copilot) modify the file, with no data loss or feedback loops
• Page layout mode — Optional document-style view with configurable margins
• Syntax highlighting — Code blocks with language-aware highlighting
• Tables — Full table editing with Tab navigation
• Task lists — Interactive checkboxes that save to markdown
• List reordering — Move list items up/down with Option+Arrow keys
• Table of Contents — Quick-pick overlay (Cmd+/) to search and jump to any heading, plus a Document Outline sidebar in the Explorer
• Find & Replace — Cmd+F for in-document search with match highlighting, Cmd+H for find and replace
• Editor toggle buttons — Switch between Quartz, plain text, and diff view from the editor title bar
• Theme support — Automatic, light, or dark themes

Editor Toggle Buttons

The editor title bar includes quick-access toggle buttons:

• Switch to plain text — Open the file in VS Code's default text editor
• Switch to Quartz — Open the file in the Quartz visual editor
• View git diff — Toggle inline diff view to review uncommitted changes
• Split diff view — Side-by-side comparison of current vs. last committed version

These buttons let you seamlessly move between visual editing, raw markdown, and code review without leaving the editor.

Find & Replace

Press Cmd+F (Ctrl+F on Windows/Linux) to open the search bar. Highlights all matches with next/previous navigation, case sensitivity, and whole word toggles. Cmd+H opens find and replace:

Slash Commands

Type / anywhere to quickly insert blocks:

Table Editing

Create and edit tables with full keyboard navigation:

Callouts

8 Obsidian-style admonition types with colored borders and icons:

Table of Contents

Press Cmd+/ (Ctrl+/ on Windows/Linux) to open a quick-pick overlay for jumping to any heading. Filter by typing, navigate with arrow keys, and press Enter to scroll:

Frontmatter

Collapsible YAML frontmatter banner for document metadata:

Task Lists

Interactive checkboxes that save directly to markdown:

Code Blocks

Syntax-highlighted code blocks with language detection:

Dark Theme

Full dark theme support that matches your VS Code theme:

Installation

Install from VS Code Marketplace

Or manually:

1. Open VS Code
2. Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
3. Search "Quartz"
4. Click Install

Usage

1. Open any .md file — Quartz automatically sets itself as the default markdown editor on first install
2. Start editing!

To switch to the plain text editor, use the toggle button in the editor title bar or run "Quartz: Toggle Editor" from the Command Palette.

Configuration

All settings are under quartz.editor.* in VS Code Settings:

Keyboard Shortcuts

Block Input Rules

Type these at the start of a line to create blocks:

Known Limitations

• Some advanced markdown features (e.g., footnotes, definition lists) are displayed as raw text
• Images require absolute URLs or workspace-relative paths
• Maximum recommended file size: 10,000 lines for optimal performance

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

MIT