MDX Component Showcase

This post demonstrates all available MDX components in the blog for easy reference.

Let $f(x)$ be defined on some open interval containing $a$ , except possibly at $a$ itself. Then we say that the limit of $f(x)$ as $x$ approaches $a$ is $L$ , and write $\lim_{x \to a} f(x) = L$ , if for every number $\epsilon > 0$ there is a number $\delta > 0$ such that if $0 < |x - a| < \delta$ then $|f(x) - L| < \epsilon$ .

Theorem

定理 (Fermat's Last Theorem)

No three positive integers $a$ , $b$ , and $c$ satisfy the equation $a^n + b^n = c^n$ for any integer value of $n$ greater than 2.

Proof

证明

The proof is too complex to include here. This theorem was proven by Andrew Wiles in 1995.

∎

Mathematics

Inline Math

Einstein’s mass-energy equivalence $E = mc^2$ reveals the relationship between mass and energy.

Block Math

Maxwell’s equations (differential form):

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \epsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned}

Code Highlighting

Basic Code Block

def fibonacci(n: int) -> int:
    """Calculate the nth Fibonacci number"""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# Test
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

Code Block with Line Numbers

interface User {
  id: number;
  name: string;
  email: string;
  createdAt: Date;
}

function createUser(name: string, email: string): User {
  return {
    id: Math.random(),
    name,
    email,
    createdAt: new Date()
  };
}

Code Diff

Pseudocode

QuickSort Algorithm

Tabs

// JavaScript example
const sum = (a, b) => a + b;
console.log(sum(1, 2)); // 3

# Python example
def sum(a, b):
    return a + b
print(sum(1, 2))  # 3

// Go example
func sum(a, b int) int {
    return a + b
}
fmt.Println(sum(1, 2)) // 3

Collapsible Content (Details)

Click to expand for more content

This is hidden detailed content. It can contain any Markdown content, including code blocks, lists, etc.

Item 1
Item 2
Item 3

console.log('Hidden code');

This is expanded by default

This collapsible block is expanded by default.

Sample Audio

Tables

Basic Table

Language	Type System	Primary Use
TypeScript	Static	Web Frontend/Backend
Python	Dynamic	Data Science/Scripting
Rust	Static	Systems Programming
Go	Static	Backend Services

Blockquote

Simplicity is the ultimate sophistication.

— Leonardo da Vinci

Footnotes

This is a sentence with a footnote¹.

Task List

Create components
Write documentation
Add tests
Deploy

Summary

This post showcased all available MDX components in the blog. You can use these components in your own articles to enrich your content presentation.

This is the footnote content. ↩

Callout Boxes

Academic Components

Definition

Theorem

Proof

Mathematics

Inline Math

Block Math

Code Highlighting

Basic Code Block

Code Block with Line Numbers

Code Diff

Pseudocode

Tabs

Collapsible Content (Details)

Chart Components

Chart.js

ECharts

Vega-Lite

Plotly

Diagrams

Mermaid Flowchart

Sequence Diagram

Typograms (ASCII Diagrams)

Maps (GeoMap)

Media Components

Figure

Photo Grid

Video

Audio

Sample Audio

Tables

Basic Table

Blockquote

Footnotes

Task List

Summary