🧑‍🚀

Using MDX

This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.mjs config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

1. Interactive Components

2. Advanced Mathematics

You can write complex TeX equations, including matrices and multi-line equations.

Matrices

A=(123456789),B=[x11x12⋯x1nx21x22⋯x2n⋮⋮⋱⋮xm1xm2⋯xmn]A = \begin{pmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{pmatrix} , \quad B = \begin{bmatrix} x_{11} & x_{12} & \cdots & x_{1n} \\ x_{21} & x_{22} & \cdots & x_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ x_{m1} & x_{m2} & \cdots & x_{mn} \end{bmatrix}

Systems of Equations

{3x+5y+z=107x−2y+4z=20−6x+3y+2z=30\begin{cases} 3x + 5y + z = 10 \\ 7x - 2y + 4z = 20 \\ -6x + 3y + 2z = 30 \end{cases}

Calculus & Physics

ψ(r,t)=∑n=1∞cnϕn(r)e−iEnt/ℏ\psi(\mathbf{r}, t) = \sum_{n=1}^{\infty} c_n \phi_n(\mathbf{r}) e^{-i E_n t / \hbar} ∮∂ΣE⋅dℓ=−ddt∬ΣB⋅dS\oint_{\partial \Sigma} \mathbf{E} \cdot d\ell = -\frac{d}{dt} \iint_{\Sigma} \mathbf{B} \cdot d\mathbf{S}

3. Code Syntax Highlighting

Here are examples across different programming languages.

Python (Modern Features)

PYTHON
from functools import wraps

def debug_logger(prefix: str = "[DEBUG]"):
    def decorator(func):
        @wraps(func)
        def wrapper(*args, **kwargs):
            print(f"{prefix} Calling {func.__name__} with {args}")
            result = func(*args, **kwargs)
            print(f"{prefix} Result: {result}")
            return result
        return wrapper
    return decorator

@debug_logger(prefix="[INFO]")
def fibonacci(n: int) -> list[int]:
    """Generate first n fibonacci numbers."""
    a, b = 0, 1
    result = []
    for _ in range(n):
        result.append(a)
        a, b = b, a + b
    return result

# List comprehension with filter
squares = [x**2 for x in range(10) if x % 2 == 0]

Rust (Systems Programming)

RUST
#[derive(Debug)]
struct Point {
    x: f64,
    y: f64,
}

impl Point {
    fn origin() -> Self {
        Point { x: 0.0, y: 0.0 }
    }

    fn distance_from_origin(&self) -> f64 {
        (self.x.powi(2) + self.y.powi(2)).sqrt()
    }
}

fn main() {
    let p = Point { x: 3.0, y: 4.0 };
    println!("Point: {:?}, Distance: {}", p, p.distance_from_origin());
}

TypeScript / React

TSX
interface UserProps {
    id: string;
    username: string;
    isAdmin?: boolean;
}

const UserProfile: React.FC<UserProps> = ({ id, username, isAdmin = false }) => {
    const [lastActive, setLastActive] = useState<Date | null>(null);

    useEffect(() => {
        setLastActive(new Date());
    }, [id]);

    return (
        <div className="p-4 border rounded-xl shadow-sm">
            <h3 className="text-lg font-bold">{username}</h3>
            {isAdmin && <span className="badge badge-primary">Admin</span>}
            <p className="text-sm text-muted-foreground">
                Last seen: {lastActive?.toLocaleTimeString() ?? 'Loading...'}
            </p>
        </div>
    );
};

4. Rich Diagrams (Mermaid)

Standard mermaid code blocks with custom styles and hand-drawn look.

System Architecture

渲染中...

State Machine

渲染中...
← Back to Blog