Math, Diagrams, and Code Highlighting in Markdown

Plain Markdown covers text, lists, links, and tables. Technical writing usually needs three more things: equations, diagrams, and readable code. The Markdown editor supports all three, with a live preview, and the same syntax works on GitHub, GitLab, Obsidian, and many documentation tools.

Math with LaTeX

Wrap inline math in single dollar signs and display math in double dollar signs:

The famous equation is $E = mc^2$.

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

Equations are typeset with KaTeX, which supports the LaTeX math you are most likely to need: fractions (\frac{a}{b}), roots (\sqrt{x}), sums and integrals (\sum_{i=1}^{n}, \int_a^b), Greek letters (\alpha, \beta), matrices, and aligned equations. You can also write a fenced block with the language math.

A few tips:

• A dollar sign followed by a space does not start math, so prices like “$5 and $10” are left alone.
• Escape a literal dollar sign as \$ when it would otherwise pair up.
• The ∑ button in the editor toolbar wraps the selection in $…$.

Diagrams with Mermaid

Mermaid turns a short text description into a diagram. Write a fenced code block with the language mermaid:

graph LR
  A[Write] --> B[Preview]
  B --> C{Looks good?}
  C -- Yes --> D[Export]
  C -- No --> A

The editor renders it as a flowchart. Mermaid also supports sequence diagrams, class diagrams, state diagrams, Gantt charts, pie charts, and more. A sequence diagram looks like this:

sequenceDiagram
  Browser->>Server: GET /page
  Server-->>Browser: 200 OK

Diagrams render in a sandboxed, strict mode, and the resulting SVG is sanitized before it is shown, so pasted diagrams cannot run scripts. Click the ◇ toolbar button to insert a starter diagram.

Syntax-highlighted code

Add a language name after the opening backticks:

def greet(name: str) -> str:
    return f"Hello, {name}!"

The editor highlights around 35 common languages, including JavaScript, TypeScript, Python, Go, Rust, Java, C#, SQL, Bash, JSON, YAML, and HTML. Without a language name, the block is shown as plain monospace text.

Exporting

Everything above carries through to export:

• PDF keeps equations, diagrams, and highlighting exactly as previewed, in your chosen preview theme.
• HTML produces a standalone page with diagrams embedded as SVG and math styled by KaTeX.
• Word (.docx) keeps code blocks and writes equations as their TeX source; diagrams are replaced by a placeholder, so use PDF or HTML when diagrams matter.

It stays fast

Math, diagrams, and highlighting are loaded only when your document uses them. A plain note never downloads the diagram engine, and once a feature has loaded it is cached for the rest of your session.

Ready to try it? Open the templates gallery and start from the Study notes template — it includes a formula and a diagram.