Flintmark

Obsidian-style Markdown Live Preview for VS Code.

English · 简体中文

Screenshots · Supported Markdown · Install · Settings · Build

Flintmark is a custom Markdown editor for VS Code. It renders formatting in the document and reveals the source around the caret, so editing and previewing happen in the same tab. A freshly opened note renders in full until you click or type — the initial cursor position never opens the file showing raw source. The file on disk is still an ordinary .md file.

It also adds the pieces that are usually missing when an Obsidian vault is opened in VS Code: wikilink and tag completion, Properties, image embeds, Outline, Todo, and Backlinks.

Screenshots

These screenshots were taken with the extension itself, loaded from this repository in a VSCodium development host.

Dark and light themes

Flintmark follows the current VS Code color mode. Changing themes updates the open editor in place, without moving the caret or resetting the scroll position.

Use Flintmark: Select Theme or set "ofm.theme": "catppuccin" to use Catppuccin, adapted from Catppuccin for Obsidian. It uses Latte in light mode and Mocha in dark mode. Things remains the default.

Dark	Light

Editing in place

Click a rendered line to edit its Markdown. Move the caret elsewhere and the line renders again. Task checkboxes can be toggled directly, and fenced code blocks keep their highlighting and Copy button while they are not being edited.

Flintmark also provides shortcuts for bold, italic, inline code, strikethrough, and links. If text is selected, pasting a URL turns the selection into a Markdown link.

Type [[ to complete a note name, # to complete a tag, or [[# to complete a heading in the current note. The lists are refreshed when files in the workspace change.

Properties

Flintmark displays simple YAML frontmatter as a Properties panel. Dates, lists, and tags get their own icons, and list values are shown as chips. Click the panel to edit the YAML. Frontmatter that Flintmark cannot parse is left as source.

Outline, Todo, and Backlinks

VS Code's built-in Markdown Outline cannot read a custom webview editor, so Flintmark includes its own sidebar views:

• Outline shows the headings in the active note.
• Todo lists every standard and extended task in source order.
• Backlinks lists notes that link to the active note.

Clicking an Outline or Todo row moves the caret to that line in Live Preview.

Rendered Markdown

Callouts Common Obsidian callout types and aliases have their own colors.	Task states In-progress, cancelled, forwarded, and question states are included.
Code blocks More than 30 languages are highlighted; each block has a Copy button.	GFM tables Bold, italic, code, links, and highlights also work inside cells.
Math KaTeX is used for inline math and display blocks.	Mermaid Mermaid blocks render as diagrams and return to source for editing.
Inline syntax Wikilinks, tags, highlights, footnotes, comments, and inline code.	Images Standard Markdown images and vault-wide ![[embeds]].

Blockquotes, ordered and unordered lists, horizontal rules, Setext headings, footnote definitions, and sanitized inline SVG blocks are supported too. %% comments %% are hidden until the caret enters them.

Images and attachments

Pasting or dropping an image saves it next to the note and inserts an ![[image-name.ext]] embed. Flintmark cleans up characters that would break a wikilink, picks a new name rather than overwriting an existing file, and shows a warning for unsupported or oversized images.

Image embeds can be found by bare name anywhere in the vault. Width and height can be set with ![[image.png|200]] or ![[image.png|200x120]].

Copilot and Cursor

Copilot and Cursor normally cannot see a selection inside a webview. When text is selected in Flintmark, a small toolbar offers two ways around that:

• Edit opens the same range in the source editor and, by default, starts the host's inline AI command.
• Add to Chat attaches the range to the host's chat or composer.

The extension knows the usual command IDs for VS Code and Cursor. They can be overridden in Settings for other hosts. If a button calls the wrong command, Flintmark: Show AI Log shows the selected range and the command that was used.

Supported Markdown

• Headings, emphasis, strikethrough, links, images, blockquotes, lists, horizontal rules, inline code, and fenced code blocks.
• GFM tables and task lists.
• [[wikilinks]], aliases, heading and block anchors, and new-note creation for unresolved links.
• #tags, ==highlights==, footnotes, and %% comments %%.
• Obsidian callouts, including the common aliases and color variants.
• Standard [ ] and [x] tasks, plus [/] in progress, [-] cancelled, [>] forwarded, and [?] question.
• YAML frontmatter, KaTeX math, Mermaid diagrams, inline SVG, and Obsidian image embeds.

Install

Install Flintmark from the VS Code Marketplace, search for it in the Extensions view, or run:

code --install-extension quboliu.flintmark

VSIX files are also available on the GitHub Releases page. In VS Code, choose Extensions → … → Install from VSIX….

Open a Markdown file and accept the prompt to use Flintmark by default. The same choice is available later as Flintmark: Set Live Preview as Default Markdown Editor. Switch to Live View and Switch to Code View change the editor for the current file.

To set the association by hand:

"workbench.editorAssociations": {
  "*.md": "ofm.livePreview",
  "*.markdown": "ofm.livePreview"
}

Zed developer preview

The repository also contains a native Zed extension adapter in editors/zed. It adds vault-wide wikilink/tag completion, definition and reference navigation (including backlinks), heading/task symbols, document links, and Obsidian-oriented snippets to Zed's built-in Markdown editor. Use Zed's own markdown: open preview to the side action for rendered output.

This is not full UI parity with the VS Code edition: Zed does not currently expose a custom-editor/webview API, so Flintmark cannot place its caret-aware Live Preview, interactive widgets, or custom sidebars inside Zed. The adapter is ready for development installation now; registry publication follows the first coordinated release. See the Zed README for the exact feature and install details.

Settings

Files and indexes

Flintmark edits the VS Code TextDocument; it does not keep a second copy of a note or convert it to another format. The note, its links, and its frontmatter remain in the Markdown file.

The note, tag, backlink, and image indexes are derived from the workspace and can be rebuilt at any time. Initial scans run in small batches so a large vault does not hold up the editor, and ordinary saves update only the changed file.

The note used in the dark and light screenshots is media/demo/go-pipelines.md. It was written as a demo and draws on the Go blog post Go Concurrency Patterns: Pipelines and cancellation.

Building from source

The CI build uses Node.js 20. The extension requires VS Code 1.89 or newer.

git clone https://github.com/quboliu/flintmark.git
cd flintmark
npm ci
npm run compile

Open the repository in VS Code and press F5 to start an Extension Development Host.

npm run lint
npx tsc --noEmit -p .
npm run test:unit
npm run test:perf
npm run test:zed
npm run test:e2e

The main screenshots can be regenerated with:

npm run shots:features
npm run shots:go-pipelines
npm run shots:navigation

Disclaimer

Flintmark is not affiliated with, endorsed by, or sponsored by Obsidian or Dynalist Inc. “Obsidian” is a trademark of Dynalist Inc. and is used here only to describe syntax and visual compatibility.

Credits

• Things theme — © Stephan Ango (@kepano); Obsidian port maintained by Colin Eckert (@colineckert). It is bundled under the MIT License (source). See THIRD-PARTY-NOTICES.md.
• Built with CodeMirror 6, Lezer, KaTeX, and Mermaid.

License

MIT © quboliu. See THIRD-PARTY-NOTICES.md for bundled third-party software.