MarkBricks
Edit Markdown visually in VSCode with the WordPress block editor. MarkBricks opens .md files in a visual editor where every paragraph, heading, list, and code fence is a block you can move, transform, and format. It saves the result back as plain Markdown.
Features
Block-based editing
Every Markdown element is a block you can drag, reorder, duplicate, or transform. The List View and Outline show the document structure. Files stay plain .md, and the editor keeps the syntax you chose (* or _, - or *, backtick or tilde fences), so saving never rewrites a file.
Live preview for diagrams and math
Mermaid diagrams and TeX math (rendered with KaTeX) preview right in the document and update as you type. Select the block to edit its source, and click away to see only the result. Math is saved as $$, which GitHub, VS Code, and Marp also display. Other code blocks get syntax highlighting.
Front matter and GitHub-style alerts
YAML front matter and GitHub-style alerts (> [!NOTE]) can be edited in the visual editor too.
Marp slide preview
When a document's front matter contains marp: true, the visual editor's header shows Marp Mode and a Preview Slides button, which opens the Marp slides beside the editor. In the text editor, the button is in the editor title bar. The preview updates as you type, in the text editor and the visual editor alike.
To present, Enter slide mode in the preview's toolbar, or press F in the preview, to show one slide at a time within the panel. Move between the slides with the arrow keys, Page Up, Page Down, Home, End or the wheel, and press Escape to leave. Maximize the panel or enter VS Code's full screen to fill the screen.
To share a deck, run Export Slide Deck… from the MarkBricks button or the Command Palette, and save it as an HTML or PDF file. The export includes unsaved edits.
- HTML is a standalone page that any browser opens, one slide per screen. Images keep the paths written in the Markdown, so save the page next to the deck for relative paths to work.
- PDF has one page per slide. It needs Google Chrome, Microsoft Edge or Mozilla Firefox installed where the extension runs: on the remote host over Remote - SSH, for example.
Light and dark themes, in your language
The editor follows your VSCode theme, or you can pin it to light or dark with the markBricks.theme setting. The interface is translated into 13 languages.
Usage
Open a Markdown file, then run Open with MarkBricks from the Command Palette. To go back to the source, run Open with Text Editor.
You can also switch editors from the editor title bar. To open every Markdown file in MarkBricks by default, choose Set Default for '*.md' > Visual Editor - MarkBricks there.
The MarkBricks button in the editor title bar lists the commands for the current file: switching editors, previewing and exporting slides, and opening the extension settings.
Settings
markBricks.showListViewByDefault: Open the List View panel by default. Default: falsemarkBricks.showBlockBreadcrumbs: Display the block hierarchy trail at the bottom of the editor. Default: truemarkBricks.topToolbar: Access all block and document tools in a single place. Default: falsemarkBricks.spotlightMode: Focus on one block at a time. Default: falsemarkBricks.contentWidth: Maximum width of the content area, in pixels (400–1600). Default: 700markBricks.fontSize: Base font size of the content area, in pixels (10–24). Default: 13markBricks.fontFamily: Typeface used for the content area: system, sans-serif, serif, monospace, or handwriting. Default: system
