FrontMark Preview for VS Code

Preview *.fm files inside VS Code.

Features

• Registers the frontmark language for *.fm.
• Adds FrontMark: Open Preview and FrontMark: Open Preview to the Side.
• Provides an optional read-only custom editor named FrontMark Preview.
• Renders Markdown, YAML frontmatter, tables, task lists, footnotes, abbreviations, definition lists, Material icons, emoji shortcodes, Critic markup, keyboard keys, KaTeX math, fenced code options, FrontMark-style admonitions, tabs, containers, grids, image captions, local images, media blocks, forms, Chart.js/Vega charts, hexadecimal blocks, Mermaid diagrams, n8n blocks, raw HTML and Svelte component previews.

This extension includes a local renderer inspired by the FrontMark pipeline in Image_frontmark. It aims to be close enough for authoring inside VS Code. Mermaid, Chart.js, Vega/Vega-Lite and Asciinema are mounted from the rendered FrontMark source inside the webview. Runtime-heavy integrations such as Svelte/Supabase still use focused component previews; for pixel-perfect verification of the final generated site, keep using the FrontMark Astro renderer with make dev or make preview.

Development

make install
make compile

Then press F5 in VS Code and open examples/demo.fm in the Extension Development Host. Use FrontMark: Open Preview to the Side from the command palette or the editor title button. The demo file is intentionally broad and acts as a smoke-test document for most supported FrontMark syntaxes.

Useful Make targets:

make check
make smoke
make test
make watch
make package
make install-vsix
make clean