Editable Markdown Preview

An Obsidian-style editable Markdown preview for VS Code.

It opens a custom Markdown preview beside the editor. You can single-click the preview to reveal the matching source location, and double-click preview content to edit the underlying Markdown.

Features

Targets .md and .markdown files.
Single-click preview content to reveal the matching Markdown source position.
Double-click plain text headings, paragraphs, list items, and quote lines to edit directly in the preview.
Double-click LaTeX, code blocks, tables, or formatted Markdown to edit the original source in a source box.
Source boxes auto-size to the rendered block and full source content.
LaTeX renders with KaTeX when CDN assets are available.
LaTeX source boxes include a live rendered preview while editing.
Paragraph and list-item soft line breaks collapse like the built-in VS Code Markdown preview.
Cmd+S / Ctrl+S saves the Markdown file from the preview.

Usage

Open a Markdown file.
Run Editable Markdown Preview: Open from the command palette.
Single-click preview content to reveal its source location.
Double-click preview content to edit.
Press Apply for source boxes, or click away after direct text edits.
Press Cmd+S / Ctrl+S in the preview to save.

Install

For local installation, package this extension as a VSIX and install that file:

npm install -g @vscode/vsce
vsce package
code --install-extension editable-markdown-preview-0.0.1.vsix

You can also install the generated .vsix from VS Code with Extensions: Install from VSIX....

More detail is in docs/INSTALL.md.

Development

Open this folder in VS Code, press F5, and run the extension in the Extension Development Host.

Open sample.md in that Extension Development Host for a quick manual test.

Run a syntax check with:

npm run check

Repository Layout

.
|-- extension.js
|-- package.json
|-- sample.md
|-- docs/
|   `-- INSTALL.md
|-- .github/
|   `-- workflows/
|       `-- ci.yml
|-- CHANGELOG.md
|-- CONTRIBUTING.md
|-- LICENSE
`-- README.md

Notes

KaTeX is loaded from cdn.jsdelivr.net inside the preview webview. If the CDN is blocked, formulas fall back to visible LaTeX source text, but editing still works.

Troubleshooting

If VS Code says command 'editableMarkdownPreview.open' not found:

In development mode, run the command in the Extension Development Host window, not the original project window.
Make sure you pressed F5 from this folder, the folder that contains package.json.
Open View > Output, choose Extension Host, and check for errors from editable-markdown-preview.

Editable Markdown Preview For VS Code

YIHE