Flintmark renders Markdown in place as you type. The line under the cursor keeps its raw syntax; everything else becomes a readable preview. There is no split pane, no separate preview file, and nothing proprietary on disk: your notes stay plain Markdown.
Preview
The screenshots below use a rewritten demo note inspired by the Go blog article Go Concurrency Patterns: Pipelines and cancellation. The demo adds frontmatter, callouts, a table, Go code, tags, highlights, and wikilinks so the editor can be shown on a realistic technical note.
Dark theme
Light theme
Highlights
| Area | What Flintmark does |
|---|---|
| Live Preview | Renders headings, emphasis, inline code, quotes, lists, task checkboxes, wikilinks, tags, highlights, comments, footnotes, tables, math, diagrams, and images directly in the editor. |
| Editing | Move the cursor onto a line to edit raw Markdown; move away and it renders again. Formatting shortcuts cover bold, italic, inline code, strike, and links. Pasting a URL over selected text creates a Markdown link. |
| Frontmatter | YAML frontmatter becomes a Properties panel with type icons and chips for list/tag values. Complex YAML falls back to a dimmed raw block. |
| Code | 30+ fenced-code languages are highlighted, including JS/TS, Python, Rust, Go, SQL, Shell, C/C++, C#, Java, PHP, Ruby, Kotlin, Swift, YAML, TOML, and Dockerfile. Rendered code blocks include a Copy button. |
| Tables | GFM tables render as HTML tables and can be edited in place. |
| Attachments | Local images and Obsidian embeds render inline. ![[image.png]] resolves across the vault, and pasted or dropped images are saved next to the note. |
| Navigation | [[ autocompletes vault notes, # autocompletes tags, and [[# autocompletes headings in the current note. Flintmark also ships its own Outline and Backlinks views because VS Code's built-in Outline cannot see webview editors. |
| Themes | The preview follows VS Code dark, light, and high-contrast themes without rebuilding the editor, so cursor position and scroll state survive theme changes. |
Obsidian Syntax
Flintmark focuses on the Markdown syntax people already use in Obsidian-style vaults:
[[wikilinks]], including unresolved links that can create a new note.#tags,==highlights==, and hidden%% comments %%.- Callouts such as
[!note],[!tip],[!warning],[!important],[!todo], and the rest of the common Obsidian set. - Task states beyond GitHub Markdown:
[/]in progress,[-]cancelled,[>]forwarded, and[?]question. - Image embeds with optional sizing:
![[image.png|200]]or![[image.png|200x120]].
Reuse Your Editor's AI
Flintmark ships no AI of its own. A webview editor hides its selection from the host, so Copilot, Cursor, and similar tools cannot naturally see what you select inside Live Preview. Flintmark bridges that gap:
- Edit relocates the selection into the real source editor and triggers the host's inline AI command.
- Add to Chat sends the selection to the host's chat or composer command.
Command IDs are detected per host, with settings for overrides. Run Flintmark: Show AI Log when diagnosing a host whose command names differ.
Install
Install Flintmark from the VS Code Marketplace, search for Flintmark in the Extensions view, or run:
code --install-extension quboliu.flintmark
For a manual installation, download flintmark-<version>.vsix from
GitHub Releases, then choose
Extensions -> ... -> Install from VSIX....
Open any .md file and accept the prompt to make Flintmark the default Markdown
editor, or run Flintmark: Switch to Live View. You can switch back with
Switch to Code View at any time.
Set as the default Markdown editor
Missed the first-run prompt? Run Flintmark: Set Live Preview as Default Markdown Editor, or add this setting:
"workbench.editorAssociations": {
"*.md": "ofm.livePreview",
"*.markdown": "ofm.livePreview"
}
Settings
| Setting | Default | Description |
|---|---|---|
ofm.theme |
things |
Bundled Live Preview theme. |
ofm.lineWidth |
0 |
0 fills the editor width with a fixed margin; 20-240 caps a centered readable column in rem. |
ofm.fontFamily |
(theme) | Prose font for rendered Markdown, independent of the editor font. |
ofm.fontSize |
0 |
Prose font size in px. 0 means editor font size + 2px. |
ofm.monospaceFontFamily |
(editor) | Code font for fenced blocks, inline code, and frontmatter. |
ofm.ai.chatBridge |
split |
How Add to Chat relocates the selection: split keeps the Live tab, inplace flips it. |
ofm.ai.sourceLayout |
replace |
Where Edit opens the source editor: replace or beside. |
ofm.ai.trigger |
auto |
Auto-trigger native inline AI, or leave it manual. |
ofm.ai.chatCommand, ofm.ai.triggerCommand |
(auto) | Override native command IDs for your host. |
Demo Source
The Markdown source used for the two screenshots lives at media/demo/go-pipelines.md. It is a rewritten demo based on ideas from the Go blog post linked above, not a mirror of the original article.
Disclaimer
Not affiliated with, endorsed by, or sponsored by Obsidian or Dynalist Inc. "Obsidian" is a trademark of Dynalist Inc., referenced here only descriptively to state Markdown and visual compatibility.
Credits
- Things theme - © Stephan Ango (@kepano), Obsidian port by Colin Eckert (@colineckert). Bundled as the default theme under the MIT License (source). Full notice: THIRD-PARTY-NOTICES.md.
- Built on CodeMirror 6, Lezer, KaTeX, and Mermaid.
License
MIT © quboliu. Bundled third-party software: see THIRD-PARTY-NOTICES.md.