Markdown Extensions Showcase

This page is used to verify rich markdown rendering in the knowledge base.

1) Multi-language Code Blocks

pub fn fib(n: u64) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => fib(n - 1) + fib(n - 2),
    }
}

const std = @import("std");

pub fn main() !void {
    const out = std.io.getStdOut().writer();
    try out.print("zig says hi\\n", .{});
}

select topic, count(*) as total
from notes
where status = 'evergreen'
group by topic
order by total desc;

pipeline:
  name: docs-build
  steps:
    - install
    - lint
    - build

2) Mermaid Diagram

flowchart LR
  A[Question] --> B[Collect Sources]
  B --> C[Write Markdown]
  C --> D[Review + Tag]
  D --> E[Publish]

3) Chart Block (Line / Bar / Pie)

Use fenced code with language chart and provide JSON spec.

{
  "type": "line",
  "height": 300,
  "data": {
    "labels": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    "datasets": [
      {
        "label": "WebRTC Latency(ms)",
        "data": [43, 39, 45, 37, 41, 34, 32],
        "borderColor": "#22c55e",
        "backgroundColor": "rgba(34,197,94,0.15)",
        "tension": 0.32,
        "fill": true
      },
      {
        "label": "Rust Build Time(s)",
        "data": [28, 26, 27, 25, 24, 23, 22],
        "borderColor": "#3b82f6",
        "backgroundColor": "rgba(59,130,246,0.1)",
        "tension": 0.32,
        "fill": false
      }
    ]
  },
  "options": {
    "plugins": {
      "title": {
        "display": true,
        "text": "Weekly Metrics"
      }
    }
  }
}

4) LaTeX Math

Inline math: $e^{i\pi} + 1 = 0$ .

Block math:

\mathrm{MSE}(\theta) = \frac{1}{n}\sum_{i=1}^{n}(\hat{y}_i - y_i)^2

\nabla_\theta J(\theta) = \frac{1}{m}\sum_{i=1}^{m}\left(h_\theta(x^{(i)}) - y^{(i)}\right)x^{(i)}

5) GFM Tables / Task Lists / Footnotes

Feature	Syntax	Enabled
Table	`	a
Task List	`- [x] done`	yes
Footnote	`[^1]`	yes

Footnote sample.¹

6) Details / Summary

Click to expand quick tips

Put metadata in frontmatter.
Use topic with path format, e.g. programming/webrtc.
Use compact tags to help retrieval and filtering.

7) Nested Content Example

7.1 Level-1

7.1.1 Level-2

7.1.1.1 Level-3

The folder explorer supports deep nested directories and keeps links stable.

Footnotes are useful for references and extra context. ↩