diff --git a/docs/content/features/math.md b/docs/content/features/math.md
new file mode 100644
index 0000000..4103991
--- /dev/null
+++ b/docs/content/features/math.md
@@ -0,0 +1,81 @@
+---
+title: Math Rendering
+description: Build-time LaTeX math with KaTeX
+weight: 5
+---
+
+# Math Rendering
+
+sukr renders LaTeX math expressions at build time using KaTeX, producing static HTML and CSS. No client-side JavaScript required.
+
+## Inline Math
+
+Use single dollar signs for inline math:
+
+```markdown
+The quadratic formula is $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$.
+```
+
+Renders as: The quadratic formula is $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$.
+
+## Display Math
+
+Use double dollar signs for display (block) math:
+
+```markdown
+$$
+E = mc^2
+$$
+```
+
+Or fence with `math` language:
+
+````markdown
+```math
+\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+```
+````
+
+## Supported Features
+
+KaTeX supports a large subset of LaTeX math:
+
+- Greek letters: `$\alpha, \beta, \gamma$`
+- Fractions: `$\frac{a}{b}$`
+- Subscripts/superscripts: `$x_i^2$`
+- Summations: `$\sum_{i=1}^{n} i$`
+- Integrals: `$\int_a^b f(x)\,dx$`
+- Matrices: `$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$`
+- And much more...
+
+## How It Works
+
+1. Math delimiters (`$...$`, `$$...$$`) are detected during parsing
+2. KaTeX renders the expression to HTML + CSS
+3. Required fonts are embedded inline
+4. Output is pure HTML—no JavaScript
+
+## Styling
+
+KaTeX output uses semantic classes. Customize appearance:
+
+```css
+.katex {
+ font-size: 1.1em;
+}
+
+.katex-display {
+ margin: 1.5em 0;
+ overflow-x: auto;
+}
+```
+
+## Error Handling
+
+Invalid LaTeX produces an error message inline rather than breaking the build:
+
+```markdown
+$\invalid{command}$
+```
+
+Renders with a red error indicator showing what went wrong.
diff --git a/docs/content/features/mermaid.md b/docs/content/features/mermaid.md
new file mode 100644
index 0000000..44d79d9
--- /dev/null
+++ b/docs/content/features/mermaid.md
@@ -0,0 +1,70 @@
+---
+title: Mermaid Diagrams
+description: Build-time diagram rendering with Mermaid
+weight: 4
+---
+
+# Mermaid Diagrams
+
+sukr renders Mermaid diagrams at build time, producing inline SVG. No client-side JavaScript required.
+
+## Usage
+
+Use fenced code blocks with `mermaid` language:
+
+````markdown
+```mermaid
+graph LR
+ A[Input] --> B[Process]
+ B --> C[Output]
+```
+````
+
+## Supported Diagram Types
+
+| Type | Status | Description |
+| --------- | --------------- | ----------------------------------------- |
+| Flowchart | ✅ Full support | Flow diagrams with nodes and edges |
+| Graph | ✅ Full support | Directed/undirected graphs |
+| Sequence | ⚠️ Partial | Sequence diagrams (some layouts may vary) |
+| State | ⚠️ Partial | State machine diagrams |
+| Class | ⚠️ Partial | UML class diagrams |
+
+> **Note:** Some complex diagram types may have layout differences compared to the JavaScript renderer. Flowcharts and basic graphs work reliably.
+
+## How It Works
+
+1. During Markdown parsing, `mermaid` code blocks are intercepted
+2. The Mermaid definition is parsed and rendered to SVG
+3. The SVG is inlined directly in the HTML output
+4. No JavaScript or external resources needed
+
+## Example
+
+```mermaid
+graph TD
+ A[Markdown] --> B{sukr}
+ B --> C[HTML]
+ B --> D[SVG Diagrams]
+ B --> E[Highlighted Code]
+```
+
+## Styling
+
+Mermaid SVGs inherit your CSS variables. Customize the look by targeting SVG elements:
+
+```css
+.mermaid svg {
+ max-width: 100%;
+ height: auto;
+}
+
+.mermaid .node rect {
+ fill: var(--bg-sidebar);
+ stroke: var(--accent);
+}
+```
+
+## Fallback
+
+If a diagram fails to render (complex diagrams, syntax errors), the original code block is preserved with an error comment.
diff --git a/docs/content/features/sections.md b/docs/content/features/sections.md
index 0b6c72b..57164af 100644
--- a/docs/content/features/sections.md
+++ b/docs/content/features/sections.md
@@ -12,7 +12,7 @@ sukr automatically discovers sections from your content directory structure.
A section is any directory under `content/` that contains an `_index.md` file:
-```
+```text
content/
├── _index.md # Homepage (not a section)
├── about.md # Standalone page
diff --git a/docs/content/features/templates.md b/docs/content/features/templates.md
index 2ff3b1b..d4eef4f 100644
--- a/docs/content/features/templates.md
+++ b/docs/content/features/templates.md
@@ -10,7 +10,7 @@ sukr uses [Tera](https://tera.netlify.app/), a Jinja2-like templating engine. Te
## Template Directory Structure
-```
+```text
templates/
├── base.html # Shared layout (required)
├── page.html # Standalone pages
diff --git a/docs/static/style.css b/docs/static/style.css
index f233f6c..bed9928 100644
--- a/docs/static/style.css
+++ b/docs/static/style.css
@@ -150,6 +150,64 @@ pre code {
padding: 0;
}
+/* Syntax highlighting (tree-sitter classes) */
+.hl-keyword {
+ color: #ff79c6;
+}
+
+.hl-string {
+ color: #f1fa8c;
+}
+
+.hl-function {
+ color: #50fa7b;
+}
+
+.hl-comment {
+ color: #6272a4;
+ font-style: italic;
+}
+
+.hl-number {
+ color: #bd93f9;
+}
+
+.hl-operator {
+ color: #ff79c6;
+}
+
+.hl-punctuation {
+ color: var(--fg-muted);
+}
+
+.hl-punctuation-bracket {
+ color: var(--fg-muted);
+}
+
+.hl-variable {
+ color: var(--fg);
+}
+
+.hl-type {
+ color: #8be9fd;
+}
+
+.hl-constant {
+ color: #bd93f9;
+}
+
+.hl-attribute {
+ color: #50fa7b;
+}
+
+.hl-property {
+ color: #66d9ef;
+}
+
+.hl-tag {
+ color: #ff79c6;
+}
+
/* Section navigation */
.section-nav {
display: flex;
@@ -184,7 +242,8 @@ pre code {
}
/* Lists */
-ul, ol {
+ul,
+ol {
margin: 1rem 0;
padding-left: 1.5rem;
}
@@ -200,7 +259,8 @@ table {
margin: 1rem 0;
}
-th, td {
+th,
+td {
padding: 0.75rem;
text-align: left;
border: 1px solid var(--border);
@@ -215,15 +275,15 @@ th {
body {
grid-template-columns: 1fr;
}
-
+
.sidebar {
position: static;
height: auto;
border-right: none;
border-bottom: 1px solid var(--border);
}
-
+
main {
padding: 2rem 1.5rem;
}
-}
+}
\ No newline at end of file
diff --git a/docs/templates/base.html b/docs/templates/base.html
index 6936083..60f9c21 100644
--- a/docs/templates/base.html
+++ b/docs/templates/base.html
@@ -1,37 +1,26 @@
-
-
-
- {{ title }} | {{ config.title }}
-
-
-
-
-
- {% block content %}{% endblock content %}
-
-
+
+
+
+ {{ title }} | {{ config.title }}
+
+
+
+
+
+
+ {% block content %}{% endblock content %}
+
+
+