lecture.studio

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#

The Marp toolbar: eight insert buttons, the directive menu, and the help button
Labels appear when the panel is wide enough; icons only when it is narrow. Every button has a tooltip.

Each button inserts a block at the cursor and places the cursor where you type next.

ButtonInserts
SlideA slide separator and a heading: a new slide with a title.
LeadA new slide with <!-- _class: lead -->, the title-slide class.
ColumnsA two-column block: <div class="two-columns"> with two column divs, each with a heading and a list.
Image![bg right contain](./assets/….png), a background image on the right from the unit's assets folder.
NoteAn HTML comment, which Marp treats as a speaker note.
CodeA fenced code block; type the language after the backticks.
TableA three-column table skeleton.
QuoteA 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#

KeyAction
⌘SSave
⌘Z, ⇧⌘ZUndo, redo
⌘ASelect all
⌘FFind
⌥⌘FFind and replace
⌘G, ⇧⌘GNext match, previous match
⌥←, ⌥→Move by word
⌘←, ⌘→Line start, line end

Everything else is CodeMirror's default keymap.

Find and replace#

Edit › Find › Find… ⌘F opens a find bar above the text. Matches are highlighted as you type and the bar counts them ("3 of 12"); ↩ and ⇧↩, or the arrows, step through them, and ⎋ or Done closes the bar. A short selection on one line fills the field when the bar opens.

Find and Replace… ⌥⌘F, or the chevron at the left of the bar, shows the replace row: Replace changes the current match and moves to the next, All changes every match in the file as one undo. The options menu sets Match Case, Whole Words and Regular Expression; with a regular expression, $1 in the replacement is the first group.

The four Find shortcuts can be changed in Settings › Shortcuts.

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.