A practical reference for three content extensions that go beyond basic Markdown: mathematical notation via KaTeX, emoji shortcodes, and Mermaid diagrams.
Math Typesetting with KaTeX#
Add {{< katex >}} once anywhere on the page to load the KaTeX library. Hugo uses KaTeX for rendering.
Inline math#
Wrap inline expressions with \\( and \\).
The famous Euler identity: \( e^{i\pi} + 1 = 0 \)
The golden ratio: \( \varphi = \dfrac{1 + \sqrt{5}}{2} \approx 1.618 \)
Bayes’ theorem: \( P(A \mid B) = \dfrac{P(B \mid A), P(A)}{P(B)} \)
Block math#
Wrap block expressions with $$.
Quadratic formula: $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
Normal distribution (Gaussian): $$ f(x) = \frac{1}{\sigma \sqrt{2\pi}}, e^{-\frac{1}{2}\left(\frac{x - \mu}{\sigma}\right)^2} $$
Gradient descent update rule: $$ \theta_j := \theta_j - \alpha \frac{\partial}{\partial \theta_j} J(\theta) $$
Matrix multiplication: $$ C_{ij} = \sum_{k=1}^{n} A_{ik} \cdot B_{kj} $$
Emoji#
Set enableEmoji = true in hugo.toml (already enabled), then use shorthand codes directly in Markdown.
Tech & tools#
🚀 :rocket:
💻 :computer:
⚙️ :gear:
🔧 :wrench:
📊 :bar_chart:
🧠 :brain:
🔌 :electric_plug:
☁️ :cloud:
Status & feedback#
✅ :white_check_mark:
❌ :x:
⚠️ :warning:
💡 :bulb:
🔥 :fire:
👀 :eyes:
🎉 :tada:
People & places#
👋 :wave:
🤝 :handshake:
🌎 :earth_americas:
🏠 :house:
Full reference: emoji-cheat-sheet.com
Mermaid Diagrams#
Use the {{< mermaid >}} shortcode. No front matter flag needed — Blowfish loads the Mermaid.js library automatically when the shortcode is present.
Flowchart — request routing#
flowchart LR
A[Client Request] --> B{Auth Check}
B -->|valid| C[Rate Limiter]
B -->|invalid| D[401 Unauthorized]
C -->|within limit| E[API Handler]
C -->|exceeded| F[429 Too Many Requests]
E --> G[(Database)]
E --> H[Cache]
G --> I[Response]
H --> I
Sequence diagram — OAuth flow#
sequenceDiagram
participant U as User
participant A as App
participant O as Auth Server
participant R as Resource API
U->>A: Click Login
A->>O: Authorization Request
O->>U: Login Page
U->>O: Credentials
O->>A: Auth Code
A->>O: Exchange Code for Token
O->>A: Access Token
A->>R: API Call + Token
R->>A: Protected Resource
A->>U: Display Data
State diagram — deployment pipeline#
stateDiagram-v2
[*] --> Pending
Pending --> Building : trigger
Building --> Testing : build ok
Building --> Failed : build error
Testing --> Deploying : tests pass
Testing --> Failed : tests fail
Deploying --> Live : deploy ok
Deploying --> Failed : deploy error
Failed --> Pending : retry
Live --> [*]