Math and diagrams in Markdown

Write LaTeX between $…$ for inline math and $$…$$ for a block. Draw diagrams in a code block with the language mermaid. Neither is part of standard Markdown, but GitHub and Hashlite render both.

Math with LaTeX

Hashlite renders math with KaTeX, a fast renderer for the math part of LaTeX. Single dollar signs keep a formula in the line of text; double dollar signs put it on its own line.

Markdown

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

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Result

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

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

Common formulas

What	LaTeX	Result
Superscript, subscript	`x^2, \; a_i`	$x^2, \; a_i$
Fraction	`\frac{a+b}{2}`	$\frac{a+b}{2}$
Square root	`\sqrt{x^2 + y^2}`	$\sqrt{x^2 + y^2}$
Sum	`\sum_{i=1}^{n} i = \frac{n(n+1)}{2}`	$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$
Integral	`\int_0^1 x^2 \, dx = \frac{1}{3}`	$\int_0^1 x^2 \, dx = \frac{1}{3}$
Greek letters	`\alpha, \beta, \pi, \Delta`	$\alpha, \beta, \pi, \Delta$
Matrix	`\begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix}`	$\begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix}$
Cases	`f(x) = \begin{cases} 1 & x \ge 0 \\ 0 & x < 0 \end{cases}`	$f(x) = \begin{cases} 1 & x \ge 0 \\ 0 & x < 0 \end{cases}$

Write a literal dollar sign as \$ when it could be read as math.
A ```math code block also works as a math block on GitHub and in Hashlite.
KaTeX covers math only: \usepackage and document commands are not available.

Diagrams with Mermaid

Mermaid turns a short text description into a diagram. Put it in a fenced code block with the language mermaid; editors that support it draw the diagram, others show the source.

Flowchart

TD draws top-down, LR left to right. Square brackets make a box, curly braces a decision.

```mermaid
flowchart TD
    A[Write draft] --> B{Reviewed?}
    B -- Yes --> C[Publish]
    B -- No --> A
```

Sequence diagram

->> is a request, -->> a reply.

```mermaid
sequenceDiagram
    participant Browser
    participant Server
    Browser->>Server: Save document
    Server-->>Browser: Saved
```

Gantt chart

Each task has an optional id, a start (a date or after another task) and a duration.

```mermaid
gantt
    title Docs release
    dateFormat YYYY-MM-DD
    section Writing
    Draft       :a1, 2026-10-01, 5d
    Review      :after a1, 3d
    section Launch
    Publish     :2026-10-09, 1d
```

Other types include classDiagram, stateDiagram-v2, erDiagram, pie and mindmap.

Where it works

Platform	Math	Mermaid
GitHub	Yes	Yes
Hashlite	Yes (KaTeX)	Yes
GitLab	Yes	Yes
Obsidian	Yes	Yes
VS Code preview	Yes	With an extension
Plain CommonMark	No	No

Where it is not supported, math shows as the LaTeX source and a diagram as a code block, so the text still makes sense.

Try it in Hashlite: open the free editor and see the result as you type.