Markdown preview

A rendered preview of a Markdown file, opened in a window over the workbench.

markdownPreview renders a Markdown file in a window floating over the workbench: a preview button in the tab bar, the page in a window over the shell, and a button back. The file keeps the whole pane and the preview keeps up as you type — drag the window by its bar, size it from its corner, or put it back in the pane with the dock button beside its close.

import { markdownPreview } from "codelet/extensions/markdown";
import { FileSystem, Workbench } from "codelet/workbench";

const workbench = new Workbench({
  parent: document.getElementById("app")!,
  fs: new FileSystem({ "/README.md": "# Hello" }),
  extensions: [markdownPreview],
});

markdownPreview takes no options.

Warning

The renderer, md4x (md4c compiled to WebAssembly), is fetched from a CDN the first time a preview opens — it isn't bundled with codelet. A page that's offline, or served under a CSP that blocks esm.sh, opens a preview tab that says so instead of rendering. Nothing is fetched until the first preview opens.

#Try it

Click the preview button at the right of the tab bar above guide.md to render it. The renderer loads from a CDN the first time you open a preview, so it may take a moment to appear.

#Opening a preview

Four ways in, all running the same Open Preview command:

The preview icon at the right of the tab bar, over any open Markdown file.
Open Preview on a Markdown row's context menu in the explorer, without opening the file first.
Open Preview on a tab's own context menu.
The command palette, Markdown: Open Preview.

Running it on a file that's already showing a preview brings that window to the front rather than opening a second one. The file stays where it was — the preview floats over the pane rather than replacing what's in it, so the source is still there underneath.

On a narrow screen there's nowhere to put a window, so the preview opens as a tab in the pane instead — as every other tab does there.

#Code fences

Fenced code blocks are highlighted with the workbench's own syntax colours — the same theme the editor uses, including a switch between light and dark. The language named on a fence's opening line (ts, sh, jsx, and so on) is read the same way the editor reads one; a name it doesn't recognise renders the block unhighlighted rather than failing.

#Not the same as the Markdown language server

markdownPreview only renders a file's contents — it doesn't touch the editor. For diagnostics, completion or symbols while editing Markdown, use the Markdown language server instead. The two are independent and can run together.