The editor
A CodeMirror editor for Marp Markdown with an insert toolbar, a directive menu, a selection toolbar and a built-in Marp reference.
The editor panel is CodeMirror with line numbers, line wrapping, bracket matching, undo history and the standard macOS text keys. Decks get a Marp toolbar above the text; plain Markdown and text files get the bare editor.
The Marp toolbar#
Each button inserts a block at the cursor and places the cursor where you type next.
| Button | Inserts |
|---|---|
| Slide | A slide separator and a heading: a new slide with a title. |
| Lead | A new slide with <!-- _class: lead -->, the title-slide class. |
| Columns | A two-column block: <div class="two-columns"> with two column divs, each with a heading and a list. |
| Image | , a background image on the right from the unit's assets folder. |
| Note | An HTML comment, which Marp treats as a speaker note. |
| Code | A fenced code block; type the language after the backticks. |
| Table | A three-column table skeleton. |
| Quote | A block quote. |
The Directive menu (the </> icon with a chevron) inserts a per-slide directive as an HTML comment. The underscore prefix means "this slide only".
- Lead slide (_class: lead)
- No page number (_paginate: false)
- No header on this slide
- No footer on this slide
- Background colour, with the cursor on the colour value
- Invert colours
The ? button at the right end opens How decks work, a one-page Marp reference inside the app. The same sheet is under Help › How Decks Work (Marp).
The selection toolbar#
Select some text and a small toolbar floats above it: B for bold, I for italic, S for strikethrough, <> for inline code and Link for a Markdown link. Each wraps the selection with the right characters.
Keys#
| Key | Action |
|---|---|
| ⌘S | Save |
| ⌘Z, ⇧⌘Z | Undo, redo |
| ⌘A | Select all |
| ⌥←, ⌥→ | Move by word |
| ⌘←, ⌘→ | Line start, line end |
Everything else is CodeMirror's default keymap.
Sync with the preview#
Moving the cursor in the editor scrolls the preview to that slide, and clicking a slide in the preview or the slide rail moves the editor to the slide's first line. The two never fight: a short lock after each jump keeps one side from scrolling the other back.
Dark and light#
The editor follows the system appearance, like the rest of the app.