Visual Markdown Editor

A VS Code extension for WYSIWYG markdown editing, powered by Vditor.

Features

• WYSIWYG editing - See formatted output as you type
• Find in document - Search with Ctrl/Cmd+F, navigate with Enter/Shift+Enter
• Live outline - Navigate large documents easily
• Zoom controls - Toolbar buttons, keyboard shortcuts, and mouse wheel zoom
• Comments - Add comments to your documents (stored in sidecar .comments files). Commented text is highlighted, comments follow their text as you edit, and clicking a comment jumps to its text
• Image paste - Paste images directly from clipboard
• Math support - KaTeX for mathematical formulas
• Code highlighting - Syntax highlighting for code blocks
• Mermaid diagrams - Render diagrams and flowcharts
• Open in Typora - Launch the current document in Typora for distraction-free writing
• Zotero citations - Insert citations from your Zotero library (requires Better BibTeX)
• Export with citations - Export to PDF/DOCX with formatted bibliography via Pandoc

Zotero Integration

Insert citations directly from your Zotero library:

1. Click the citation button in the toolbar, use the Insert menu, or right-click and select Insert Citation
2. Search your Zotero library by author, title, or citation key
3. Select a reference to insert a Pandoc-style citation (@citekey)

Requirements:

• Zotero must be installed
• Better BibTeX plugin must be installed in Zotero

Configuration:

Exporting

Export your markdown to PDF, DOCX, or HTML:

1. Right-click in the editor and select Export...
2. Choose format:
   • PDF/DOCX (with Citations) - Uses Pandoc with bibliography processing
   • PDF/DOCX - Standard export without citation processing
   • HTML - Web format
3. For citation exports: select citation style from bundled styles or browse for a custom .csl file
4. For DOCX: optionally select a custom Word template

Requirements:

• Pandoc must be installed
• For PDF export: A LaTeX distribution (e.g., TeX Live, MiKTeX) with XeLaTeX

Bundled Citation Styles:

• APA (default)
• Chicago Author-Date
• Vancouver
• IEEE
• Nature
• MLA

Custom Styles and Templates:

• Custom CSL: Set pandoc.cslStyle to an absolute path or workspace-relative path to any .csl file
• Custom DOCX Template: Set pandoc.referenceDoc to a Word document that defines your preferred fonts, margins, and styles. See Pandoc documentation for details.

Configuration:

Writing as Code

Markdown is a powerful approach to documentation that treats writing as code. Your documents live alongside your source files, can be version-controlled with Git, and are easily diffed and merged.

This workflow is particularly well-suited for AI-assisted development:

• AI coding agents can read, write, and edit markdown files directly
• Documentation stays in sync with code changes in the same commit
• Plain text format means AI can understand and modify content without special tooling
• WYSIWYG preview lets you verify AI-generated documentation looks correct

Keyboard Shortcuts

Toolbar

The toolbar provides quick access to common formatting and features:

Zoom Controls

Multiple ways to adjust text size:

• Toolbar buttons - Click - / + buttons, or click the percentage to reset
• Keyboard shortcuts - Ctrl/Cmd + +/-/0
• Mouse wheel - Hold Ctrl/Cmd and scroll

Zoom range: 50% to 200%

Tips

• Open links: Ctrl/Cmd + click or double-click
• Comments: Select text and click the comment icon to add a note (without a selection, the comment attaches to the current paragraph). If the commented text is later edited away, the comment is marked in the panel and can be re-attached to a new selection
• Open in Typora: Click the Typora icon to edit in Typora (must be installed)
• Context menu: Right-click for Copy, Paste, Insert Citation, and Export

Using the Default VS Code Editor

If you prefer the built-in VS Code markdown editor, add this to your settings.json:

{
    "workbench.editorAssociations": {
        "*.md": "default",
        "*.markdown": "default"
    }
}

Or use "Open With..." to choose an editor per file.

Configuration

Troubleshooting

Zotero citations not working:

• Ensure Zotero is installed and has been opened at least once
• Install the Better BibTeX plugin in Zotero
• Run the Markdown Editor: Detect Zotero Installation command to verify detection
• If auto-detection fails, set document-viewer.zotero.zoteroDbPath manually (plus document-viewer.zotero.betterBibtexDbPath for older Better BibTeX versions that still keep better-bibtex.sqlite)
• If Zotero is running, the database may be slightly stale — use Markdown Editor: Refresh Zotero Library to reload

Pandoc export fails:

• Verify Pandoc is installed: run pandoc --version in a terminal
• For PDF export, a LaTeX distribution with XeLaTeX is required (e.g., TeX Live, MiKTeX)
• If Pandoc is not on your PATH, set document-viewer.pandoc.path to the full executable path

PDF export without Pandoc fails:

• A Chromium-based browser (Chrome, Edge, or Brave) must be installed
• If auto-detection fails, set document-viewer.chromiumPath to the browser executable path

Editor not opening for markdown files:

• Check your workbench.editorAssociations setting — if set to "default", the built-in editor takes priority
• Use "Open With..." from the file context menu to choose the Visual Markdown Editor

Development

git clone https://github.com/lricher7329/visual-markdown-editor.git
cd visual-markdown-editor
yarn install
yarn dev          # Rebuild the extension on change

Press F5 in VS Code to launch the Extension Development Host. Reload the window to pick up rebuilt code; the editor UI in resource/vditor/ is loaded as-is.

yarn build        # Production build
yarn test         # Run tests
yarn lint:fix     # Fix lint issues
yarn package      # Create .vsix package

Credits

• Markdown editor: Vanessa219/vditor
• Icons: VS Code Codicons
• Icon theme: PKief/vscode-material-icon-theme

License

MIT