Code Maths And Diagrams

A fenced block holds text that keeps its exact spacing: a shell command, a JSON document, a snippet of Python. The word after the opening fence decides how the block is shown. Any language name gives syntax highlighting in place. Two words give something drawn instead: math for a typeset equation and mermaid for a diagram. Whatever is drawn, the file holds only the text you typed.

Code blocks

Make a code block

Type three backticks and press Enter. The editor adds the closing fence below and puts the cursor on the empty line between them. Type a language name after the opening backticks first, ```python, ```ts, ```sql, to get highlighting. A block with no language shows as plain text on a shaded panel.

Type / and choose Code block for the same thing from the menu.

A new block starts with no language unless the graph has a default. Set one under Settings > General > Default code language, and every block you create in that graph opens with it (Graph Settings).

When the cursor leaves the block it shows as a shaded panel with the fences dimmed. Click back in and they brighten for editing. Change the language word at any time and the highlighting follows. A language EtherPK does not recognise shows as plain text.

Backticks inside a block

To put a three-backtick fence inside a block, open the outer block with four backticks. A block closes only on a fence of exactly the same length at the same column, so the inner fence is content. A fence of tildes (~~~) is not recognised and stays plain text.

Keys inside a block

Key	Effect
Enter	A new line of code, kept aligned with the block. It never creates a bullet
Tab / Shift+Tab	Indent or outdent the code, never past the block's left edge. On a fence line, the whole block moves as a unit
Ctrl+Enter (Cmd+Enter on a Mac)	Step out of the block onto a fresh line below it. In a bullet, that line is a new sibling bullet
Alt+Up / Alt+Down	Move a line of code within the block. A line never crosses a fence, and on a fence line the whole block moves
Backspace / Delete at a fence edge	Refused. A join never crosses a fence, so a block cannot be dissolved by accident. Deleting a backtick itself is still allowed

Nothing inside a block is read as markdown: a - item or a # comment in code is code. Bold, wikilinks, tasks and tables are not recognised there either.

Code blocks in a list

A code block works inside an outliner bullet. The fence sits at the bullet's content column, one space right of the dash, and every line inside stays aligned there. Indenting or moving the bullet takes the block with it, and the block folds with the bullet.

- Gaussian integral
  ```math
  \int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}
  ```

The fence can also open on the bullet's own line, `- ```, in which case the bullet's dot marks the block.

Maths

Open a block with ```math and write LaTeX inside it:

```math
\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}
```

Move the cursor out and the block becomes the typeset equation. Click it, or arrow onto it from the line above or below, and the LaTeX comes back for editing.

• The word must be math. A block opened with latex or tex is highlighted as code.
• A mistake in the LaTeX does not lose anything. The part KaTeX cannot read shows in red, in place, and the rest still renders.

Maths inside a sentence

Wrap a formula in single dollar signs for maths in the middle of a line:

The area of a circle of radius $r$ is $\pi r^2$.

The formula renders in place and reveals its source whenever the cursor touches either dollar sign.

• There is no $$ ... $$. Double dollars are plain text. A block of maths is a math fence.
• A lone $ is a dollar sign. "It costs $5" stays as typed, because a `$` with no partner on the same line is never maths.
• The pair must close on the same line.
• Write \$ for a literal dollar sign next to something that would otherwise pair up.

Diagrams

Open a block with ```mermaid and write Mermaid syntax inside it:

```mermaid
flowchart LR
    Draft --> Review --> Published
```

While you edit, a live preview sits below the closing fence and redraws as you type. When the cursor leaves, the block is replaced by the drawing. A diagram Mermaid cannot parse shows the error in the preview while editing and a compact error card when collapsed. Your text is never changed.

On a published site

Code is highlighted with the same grammars the editor uses. Maths is typeset when you publish, and the site carries the fonts it needs. Diagrams are drawn when you publish and shipped as images, so a published site loads no script for any of them. See Publishing Your Notes As A Website.

An agent publishing from the The Headless Client needs a browser installed once to draw diagrams; the page says how.