Milkpad

Edit markdown in a WYSIWYG way, powered by milkdown.

Why Milkpad

I built this while writing the context files and instructions for my autoresearch lab, which left me with a web of .md files sitting inside a VS Code project. The standard text editor made that feel like coding while I was planning, and I found it hard to make out distinct features at a glance. I already knew Milkdown from the editor on my blog and loved how it looked while I was writing, so I tried the official Milkdown VS Code extension.

It did not fit the way I work. I am on a 13-inch screen, and most of the time I have several windows side by side — the markdown file next to a terminal, which is how the lab gets written. Upstream keeps such wide margins down the sides that the editor is unreadable in a pane that size. I do not want the wider window either: in a narrow column more of what I have already written stays in view, and that is how I backtrack while thinking.

So this fork is the visual layer, re-cut for a narrow pane: sizing dials in place of a single zoom, tighter gutters, the block handle stacked so it costs one button of width instead of two, and left and right padding set separately rather than as one measurement. The editor underneath is upstream's, unchanged, and the raw HTML rendering described below is this fork's own.

It is my default markdown editor right now, and I enjoy writing in it. It is an early version and I have not gone into all that much detail yet — I have found a few mistakes already and fixed them, and I am sure there are more I have not discovered. Try it and tell me what breaks, or what you would want it to do. I am open to pull requests.

Install

Search for Milkpad in the VS Code Marketplace, or in the Extensions view (Cmd/Ctrl + Shift + X).

Features

Plugin is still in dev progress, this is an early access version.

Usage:

• Right click in editor to open in Milkpad.
• Right click in explorer bar and select open in Milkpad.
• Search Milkpad in command palette with Cmd/Ctrl + Shift + P.

Feature List

• WYSIWYG Markdown Editor
• Full GFM syntax support
• Emoji picker and filter
• Copy and paste with markdown
• Slash commands
• Tooltip bar
• Math support
• Raw HTML rendered as markup, with an editable source card
• Search inside the document with Cmd/Ctrl + F, through VS Code's own find widget

Raw HTML

HTML written in a markdown file renders as markup instead of as visible tags, so an avatar strip like the one in Credits is a picture rather than a line of <a> and <img>.

• A block of raw HTML becomes a card with an HTML label and an Edit button. Edit swaps the rendered markup for its source, and Escape or Done swaps back.
• Because the HTML comes from whatever file is open, anything executable is stripped before it renders: script, style, iframe, object, embed, link, meta, base, form, template, noscript, every on* handler, srcdoc, and javascript: URLs. Nothing else is rewritten.
• Clicking a link inside a card follows it. Holding Cmd (Ctrl on Windows and Linux) keeps the click from following, so a block whose contents are wrapped in one link can still be selected.
• Inline HTML mixed into a sentence is left as it renders — only a paragraph that is entirely HTML is treated as a block.

Known limit: a <b> used mid-sentence styles nothing. A tag written as raw HTML is its own node, so it has no say over the words around it — only a paragraph that is entirely HTML is treated as one block.

Search

Cmd/Ctrl + F opens VS Code's own find widget over the document, so it behaves the way it does in any other file: match count, next and previous, Escape to leave.

The widget searches what is on screen rather than the file's bytes, so markdown syntax is not there to find — ** renders as bold, while the word it emphasises can be searched. Raw HTML is searchable while it shows as markup; press Edit on a block and the search covers its source instead.

This is the one place Milkpad works and upstream does not: Milkdown VSCode leaves the panel's enableFindWidget at its default of false, so Cmd/Ctrl + F does nothing there.

Saving

Saving writes the whole document back, so a few things come out in the editor's own style rather than yours:

• - and + list bullets become *. A list you wrote with * is left alone.
• A run of blank lines collapses to one.
• A bare web address gains angle brackets: https://example.com becomes <https://example.com>. It renders identically as a link, and it stays a link in readers without GitHub-flavoured markdown.

Everything else is written back as you typed it — words, numbers, links, headings, tables, code, maths and raw HTML. Note that these are the writer's habits rather than a choice per file: bullets come out as *, blank lines as one, whatever the document used before.

Set as Default

If you want to use Milkpad as your default markdown editor, you can add this config into your settings:

"workbench.editorAssociations": {
    "*.md": "milkpad.editor"
}

Credits

Milkpad is a fork of Milkdown VSCode, maintained by Nino Kroesen — ninokroesen.com, @Vultwo. All editor functionality comes from the upstream project and the Milkdown editor it is built on; the work in this fork is the raw HTML rendering and document search described above, the packaging, and the branding.

Upstream authors, without whom none of this exists:

License

MIT, keeping the upstream copyright notice. See LICENSE.