Rich Content

This is where Slate stops being just a Markdown editor and becomes a complete one. Code, math, diagrams, and images all live in the same document, and the views keep you moving across Markdown, code, images, and more, with zero lag.

Wrap code in three backticks to make a code block. Add a language name on the opening line and Slate highlights it using Shiki, the same highlighter that VS Code uses, so your snippets get real syntax coloring rather than a flat block of text.

Over a hundred languages are supported, including JavaScript, TypeScript, Python, Rust, Go, Ruby, Java, C, C++, HTML, CSS, JSON, YAML, TOML, SQL, and Bash. A block with no language stays plain monospace, with no highlighting.

// fibonacci
function fib(n) {
  return n < 2 ? n : fib(n - 1) + fib(n - 2);
}

Wrap an expression in single dollar signs for inline math, or double dollar signs on their own line for a block. Slate uses KaTeX to render the result.

• Inline: $E = mc^2$
• Block: $$ e^{i\pi} + 1 = 0 $$

KaTeX runs in strict mode, so a few rarely-used commands that can fire arbitrary URLs (like \href in some forms) are disabled. Most mathematical notation works without anything special on your part.

To draw a diagram, write its definition inside a fenced code block tagged mermaid. Slate renders flowcharts, sequence diagrams, Gantt charts, class and state diagrams, pie charts, and the rest of the Mermaid set.

Diagrams render entirely on your machine. Slate runs Mermaid in strict mode and then passes the resulting SVG through a sanitizer, so a diagram you paste in from elsewhere cannot embed scripts or fetch remote resources.

Images use the standard Markdown syntax: ![alt text](path/to/image.png). Paths are resolved relative to the document, so an image sitting next to your .md file just needs its filename. PNG, JPEG, GIF, WebP, SVG, BMP, ICO, and AVIF all work.

A common pattern is to keep images in an assets/ folder next to the document and reference them as ![diagram](assets/diagram.png). Slate creates this folder for you the first time you paste an image into a saved file.

You can paste an image directly from your clipboard or drag a file from your file manager onto the editor. Where it ends up depends on whether the document has been saved.

• Saved document. Slate writes the image into an assets/ folder next to your document and inserts a Markdown link to it. Your file stays tidy and your image is a real file you can see in the file manager.
• Untitled document. There is no folder to write to, so the image is embedded directly in the Markdown as a base64 data: URL. Save the file with a name and future pastes switch to the assets/ folder behavior.

Use a directive block to draw the reader's attention to a passage. Open with three colons and the kind of callout, write your content, then close with three more colons.

:::note
This is a note callout.
:::

:::warning
Be careful with this step.
:::

:::info
Useful background information.
:::

Each kind has its own color treatment in Reading view, so a reader can scan the page and pick out warnings at a glance.

Pipe-syntax tables work everywhere. Use a header row, a separator row of dashes, and one row per record.

| Feature | Where         |
| ------- | ------------- |
| Code    | Reading view  |
| Math    | Reading view  |

In WYSIWYG, click into a cell to edit. Use the slash menu to insert a new row or column without remembering the pipe syntax.

A task list is a bullet list where each item is checkable. Use - [ ] for an unchecked item and - [x] for a checked one.

In Reading view the checkboxes are disabled, since the document is read-only. In the editor views, toggling a checkbox flips the underlying [ ] / [x] so your file stays in sync.

Slate also recognizes two extensions that show up in technical writing.

Footnotes

A footnote marker is [^id] in the body, and the matching definition is [^id]: text on its own line. Reading view renders the markers as links to the footnotes at the bottom of the page.

Frontmatter

Lines at the very top of the file fenced by --- (YAML) or +++ (TOML) are treated as frontmatter and skipped by the renderer. You can use this to keep metadata like a title, date, or tags alongside your prose without it showing up in the output.

When you open an image file rather than a Markdown file, Slate shows a dedicated image viewer in the editor area. It is read-only and tuned for quickly checking what an image looks like at different sizes.

You can zoom with the toolbar buttons or with Cmd / Ctrl + scroll. On a trackpad, pinch to zoom. When the image is bigger than the viewer, drag to pan.