课程大纲

学院模块 1 · The everyday UI

The editor: rich notes in plain markdown

第 3 课,共 4 课14 分钟

你将学到

  • You can format notes fast with markdown, the slash menu, and shortcuts.
  • You can link notes with [[wiki links]] and predict exactly which file a link opens.
  • You can build tables, math, and Mermaid diagrams, and drop in attachments.
  • You can read the document sidebar: outline, issues, key facts, connections.
  • You can save safely, rename files, and export a themed PDF.

It's 2 p.m., the meeting is racing ahead, and your notes have to keep up. A word processor full of toolbars slows you down, and raw plain text is fast now but leaves you decoding symbols later. Consilience's editor sits in between.

In the last lesson, chat handed you an answer with citations into your notes. This editor is where those notes get written: a live-rendering markdown editor in the Notion and Obsidian family. You type plain markdown, your headings, tables, diagrams, math, and links render right in place, and the raw text on disk stays the source of truth.

This lesson walks the whole writing surface, from formatting to save and a themed PDF at the end.

The real editor, running live. Click in and start typing.

Live markdown: plain text in, rich page out

Everything you type stays plain markdown on disk. The .md file is the real thing. What you see on screen is a layer of rendered widgets painted over that text. Hover any rendered block and a small toolbar pops up with "Edit source", "Copy markdown", and "Delete block", so the raw text is always one click away. On an empty line, a quiet hint offers "Call AI", "Dictate", or "/" for the menu.

That / opens the slash menu. It's a Notion-style insert menu holding every block the editor can draw, from headings and lists to tables, math blocks, and Mermaid diagrams. Every row shows its own markdown hint, and hovering one adds a short description and a live preview.

ShortcutAction
⌘B / ⌘IBold / italic
⌘⇧XStrikethrough
⌘EInline code
⌘KInsert link (wraps a selected URL smartly)
Tab / ⇧TabIndent / outdent list items
⌘FFind in this document
⌘SSave
⌘⇧DNew document

Wiki links: connect notes as you type

Type [[ anywhere (or choose "Document link" from the slash menu) and a picker opens with "Search documents…". It lists your workspace files in three groups: Markdown, PDF, and Design, so a wiki link can point at a PDF or a design file too, not only a note.

Pick one and it inserts [[Name]]. Files buried in folders insert with their folder path in front and the extension dropped, so two files with the same name stay apart. Click a rendered chip and its target opens in a new tab, and a target that can't be found shows as a dimmed missing chip rather than breaking without a word.

Wiki links in raw markdown
## Standup notes

Talked to [[Dana Kim]] about [[Project Phoenix]].
The spec lives in [[specs/phoenix-launch]], and the
signed budget is a PDF: [[phoenix-budget]]

快速自测

You click the text of a plain markdown link like `[docs](https://example.com)` and nothing happens. What's going on?

Tables, math, diagrams, attachments

Type /table and the editor drops in a three-column table with your cursor in the first header cell. From there it acts like a tiny spreadsheet. Click a cell to edit, drag across cells to select a range, and use the "+ Add row" and "+ Add column" buttons on the widget's edges. Tab and the arrow keys hop between cells, Enter edits, Escape leaves selection mode. Right-click for the full menu: insert, move, duplicate, or delete rows and columns, or "Align column(s)" for left, center, and right.

  • Task lists: - [ ] renders as a real checkbox you click to toggle.
  • Math: $$…$$ blocks and $…$ inline both render as typeset math.
  • Diagrams: a mermaid code fence renders in place and follows your theme. The Pie chart and Bar chart slash items drop in ready-made templates, and if the syntax is off, the error message shows inside the block instead of a broken preview.
  • Images: ![alt](url) on its own line renders as a block preview, and "Edit source" opens a popover with the raw markdown and an "Apply" button.
  • Embeds: a lone link to a PDF becomes a full inline PDF viewer, and a video link gets an inline player.

Attachments are just as quick. Drag files onto the note and a drop cursor shows where they'll land, or paste an image from the clipboard with ⌘V. The file is copied into the note's own folder under a unique name, and the markdown image or link appears at your cursor. There's no central attachments folder to keep tidy.

One tab strip, any file

The editor pane isn't only for notes. The same row of tabs opens four kinds of document, each with the right surface for the job:

Tab kindWhat you getEditable?
MarkdownThe live-rendering note editor: slash menu, wiki links, extraction into the graphYes, manual save
CodeLine numbers, folding, multi-cursor, LSP completions and diagnosticsYes, manual save
PDFA full viewer: page navigation, zoom ("Fit width" / "Fit page"), rotate, open externallyRead-only
ImageFull-bleed preview, and SVG files add a "View source" buttonRead-only

Code tabs skip every note feature on purpose: no slash menu, no wiki links, no extraction. In return they get developer tooling, like a knowledge hover that shows the workspace notes and graph concepts tied to the symbol under your cursor. The code intelligence lesson digs into that side.

The document sidebar: your note's dashboard

When the active tab is a markdown note, the sidebar mode toggle adds a Document segment (next to Agent, Workspace, and Source Control). It's a live dashboard for the note in front of you:

  • "Word count": flip the metric between Lines, Words, and Chars.
  • "Outline": a collapsible tree of your headings. Click any one to jump to its line.
  • "Issues": markdownlint warnings and broken wiki links in one list. "Fix" and "Fix all" hand the cleanup to the AI agent in a new chat.
  • "Key facts": how many facts extraction pulled from this note. Click it to open the "What this note says" dialog.
  • "Related code": code files linked to this note, once a code index exists.

"What this note says" is the note's window into the knowledge graph. The "Key facts" tab shows one card per entity, and hovering a relation row reveals the exact sentence in your note the fact came from. The "Connections" tab gathers "Backlinks", "Unlinked mentions" (each with a one-click "Link" action), "Related notes", and "Knowledge graph". The extraction lessons get into how those facts are made.

Saving, renaming, exporting

Notes save by hand: press ⌘S or click the "Save" pill. That pill appears in the titlebar only while the document has unsaved changes (its tooltip reads "Save Markdown ⌘S"), and a dirty tab carries a dot marked "Unsaved changes".

A save never leaves the file half-written, and it first checks whether the file changed on disk. If it did change while you had it open, a dialog asks whether to reload from disk or keep your version. It never overwrites silently, and a tab with no edits reloads outside changes on its own.

Renaming lives in the tab. Right-click it and choose "Rename" to rename the file on disk (change the extension and that sticks too). On an Untitled tab, the new name is held and becomes the filename on your first save. Renaming on its own won't create a file.

Export a themed PDF

  1. Open the export dialog

    Click the "More actions" (…) menu in the titlebar and choose "Export as PDF".

  2. Tune the page

    Pick a "Theme" (Light / Sepia / Mono), a "Font size", a "Page size" (A4 / Letter), and a "Page margin".

  3. Tune the content

    Choose a "Code blocks" style (Card / Bordered / Dark) and toggle "Numbered headings", "Strike completed tasks", and "Cover page".

  4. Export

    Click "Export". The app renders the note and opens the system print dialog, where you pick the file or printer. "Reset" puts every option back to its default.

快速自测

You typed three paragraphs into a note, then switched to another app without pressing anything. Is your text on disk?

live rendering
Markdown blocks render as widgets over the raw text, while the .md file stays the single source of truth.
slash menu
The "/" insert menu holding every block, format, and media type, each row with its markdown hint.
wiki link
A [[Name]] reference to a note, PDF, or design file. It resolves filename over title over alias.
block toolbar
The hover toolbar on a rendered block, with "Edit source", "Copy markdown", and "Delete block".
dirty tab
A tab with unsaved changes, marked with a dot. The "Save" pill exists only while a tab is dirty.
source sentence
The word-for-word sentence from your note that backs an extracted fact.

Once notes pile up, the next job is finding them again. The next lesson covers search that reaches everything in your workspace.

The editor: rich notes in plain markdown · Consilience Academy