MDX + Markdown 语法测试

这是一篇综合语法测试文章，用于验证博客对 MDX 扩展能力与标准 Markdown 的渲染支持。

MDX 能力

MDX 赋予了我们在 Markdown 中直接书写 JavaScript 表达式和 React 组件的能力。

1. 变量插值

这篇文章的作者是：万人恢复。

2. 内联 JSX 与自定义样式

🔮

高级交互式 JSX 卡片

它完全使用 Tailwind CSS 编写，直接嵌入在 Markdown 当中！包含响应式布局和语义化 Token，这使得 MDX 完全超越了传统 Markdown 的排版限制。

交互演示

3. 条件渲染与 JSX 表达式

MDX 支持在 Markdown 中直接书写 IIFE（立即执行函数表达式）和条件渲染：

MDX 核心能力

01变量插值
02条件渲染
03列表映射
04组件嵌入

当前渲染模式：日间模式

4. 列表映射

下面是通过 JavaScript .map() 动态渲染的标签列表：

#MDX
#Tailwind CSS
#JSX
#React

基础 Markdown 语法

1. 基础排版

加粗，斜体，~~删除线~~，下划线，行内代码 npm run build。

你可以轻松插入外部链接或本地图片：

2. 列表与表格

无序列表与嵌套：

一级项目
- 二级项目 A
  - 三级项目
- 二级项目 B
另一个一级项目

有序列表与嵌套：

第一步：安装依赖
- npm install next
- npm install tailwindcss
第二步：配置项目
1. 创建 next.config.ts
2. 配置 Tailwind 插件
第三步：启动开发服务器
- 运行 npm run dev
- 访问 http://localhost:3000

复杂表格：

框架	渲染模式	客户端 JS	静态导出	学习曲线
Next.js	SSR / SSG / ISR	较多	✅	中等
Astro	SSG / SSR	极少	✅	平缓
Nuxt	SSR / SSG	中等	✅	中等
Gatsby	SSG	较多	❌	陡峭
Remix	SSR	中等	部分	中等

3. 多语言代码高亮

支持多种编程语言的语法高亮与双主题自适应：

TypeScript：

// 类型安全的博客文章接口
interface Post {
  slug: string;
  title: string;
  pubDate: string;
  tags: string[];
  content: string;
  readingTime: number;
  toc: TocItem[];
}
 
async function getPostBySlug(slug: string): Promise<Post | null> {
  const raw = await fs.readFile(
    path.join(process.cwd(), 'content', 'blog', slug, 'index.mdx'),
    'utf-8'
  );
  const { data, content } = matter(raw);
  return parseFrontmatter(data)
    ? { slug, ...data, content } as Post
    : null;
}

Rust：

use std::fs;
use std::path::PathBuf;
 
#[derive(Debug)]
struct Post {
    slug: String,
    title: String,
    reading_time: u32,
}
 
fn read_posts(dir: PathBuf) -> Vec<Post> {
    fs::read_dir(dir)
        .expect("读取目录失败")
        .filter_map(|entry| {
            let slug = entry.ok()?.file_name().into_string().ok()?;
            Some(Post { slug, title: String::new(), reading_time: 0 })
        })
        .collect()
}

Python：

from pathlib import Path
from dataclasses import dataclass
from typing import List, Optional
 
@dataclass
class Post:
    slug: str
    title: str
    reading_time: int
    toc: List[dict]
 
def extract_toc(content: str) -> List[dict]:
    """从 Markdown 内容提取目录结构"""
    toc = []
    for line in content.split('\n'):
        if match := re.match(r'^(#{2,3})\s+(.+)$', line):
            level = len(match.group(1))
            text = match.group(2).strip()
            toc.append({"level": level, "text": text})
    return toc

CSS / Tailwind：

@layer base {
  html {
    scroll-padding-top: 80px;
    scroll-behavior: smooth;
  }
  body {
    @apply bg-app text-body antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
}
 
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

4. 数学公式

行内公式： $E=mc^2$ 、 $\pi \approx 3.14159$ 。

块级公式——傅里叶变换：

f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi

二次方程求根公式：

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

5. 引用与任务列表

"竹影扫阶尘不动，月穿潭底水无痕。" —— 这是博客的座右铭，取自一首禅诗。

Markdown 的引用可以包含多行，甚至嵌套其他块级元素。

任务列表示例：

6. 脚注与分割线

脚注：

MDX 是 Markdown 的扩展¹，它允许在文档中直接嵌入 JSX 组件²。这个博客使用 next-mdx-remote 来编译 MDX 内容³。

水平分割线：

分割线常用于在视觉上分隔不同的内容区块，保持文章的节奏感。

以上测试覆盖了本博客目前支持的绝大部分渲染能力。如果你发现任何渲染异常，欢迎通过评论反馈。

这是一篇综合语法测试文章，用于验证博客对 MDX 扩展能力与标准 Markdown 的渲染支持。

MDX 能力

MDX 赋予了我们在 Markdown 中直接书写 JavaScript 表达式和 React 组件的能力。

1. 变量插值

这篇文章的作者是：万人恢复。

2. 内联 JSX 与自定义样式

🔮

高级交互式 JSX 卡片

它完全使用 Tailwind CSS 编写，直接嵌入在 Markdown 当中！包含响应式布局和语义化 Token，这使得 MDX 完全超越了传统 Markdown 的排版限制。

交互演示

3. 条件渲染与 JSX 表达式

MDX 支持在 Markdown 中直接书写 IIFE（立即执行函数表达式）和条件渲染：

MDX 核心能力

01变量插值
02条件渲染
03列表映射
04组件嵌入

当前渲染模式：日间模式

4. 列表映射

下面是通过 JavaScript .map() 动态渲染的标签列表：

#MDX
#Tailwind CSS
#JSX
#React

基础 Markdown 语法

1. 基础排版

加粗，斜体，~~删除线~~，下划线，行内代码 npm run build。

你可以轻松插入外部链接或本地图片：

2. 列表与表格

无序列表与嵌套：

一级项目
- 二级项目 A
  - 三级项目
- 二级项目 B
另一个一级项目

有序列表与嵌套：

第一步：安装依赖
- npm install next
- npm install tailwindcss
第二步：配置项目
1. 创建 next.config.ts
2. 配置 Tailwind 插件
第三步：启动开发服务器
- 运行 npm run dev
- 访问 http://localhost:3000

复杂表格：

框架	渲染模式	客户端 JS	静态导出	学习曲线
Next.js	SSR / SSG / ISR	较多	✅	中等
Astro	SSG / SSR	极少	✅	平缓
Nuxt	SSR / SSG	中等	✅	中等
Gatsby	SSG	较多	❌	陡峭
Remix	SSR	中等	部分	中等

3. 多语言代码高亮

支持多种编程语言的语法高亮与双主题自适应：

TypeScript：

// 类型安全的博客文章接口
interface Post {
  slug: string;
  title: string;
  pubDate: string;
  tags: string[];
  content: string;
  readingTime: number;
  toc: TocItem[];
}
 
async function getPostBySlug(slug: string): Promise<Post | null> {
  const raw = await fs.readFile(
    path.join(process.cwd(), 'content', 'blog', slug, 'index.mdx'),
    'utf-8'
  );
  const { data, content } = matter(raw);
  return parseFrontmatter(data)
    ? { slug, ...data, content } as Post
    : null;
}

Rust：

use std::fs;
use std::path::PathBuf;
 
#[derive(Debug)]
struct Post {
    slug: String,
    title: String,
    reading_time: u32,
}
 
fn read_posts(dir: PathBuf) -> Vec<Post> {
    fs::read_dir(dir)
        .expect("读取目录失败")
        .filter_map(|entry| {
            let slug = entry.ok()?.file_name().into_string().ok()?;
            Some(Post { slug, title: String::new(), reading_time: 0 })
        })
        .collect()
}

Python：

from pathlib import Path
from dataclasses import dataclass
from typing import List, Optional
 
@dataclass
class Post:
    slug: str
    title: str
    reading_time: int
    toc: List[dict]
 
def extract_toc(content: str) -> List[dict]:
    """从 Markdown 内容提取目录结构"""
    toc = []
    for line in content.split('\n'):
        if match := re.match(r'^(#{2,3})\s+(.+)$', line):
            level = len(match.group(1))
            text = match.group(2).strip()
            toc.append({"level": level, "text": text})
    return toc

CSS / Tailwind：

@layer base {
  html {
    scroll-padding-top: 80px;
    scroll-behavior: smooth;
  }
  body {
    @apply bg-app text-body antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
}
 
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

4. 数学公式

行内公式： $E=mc^2$ 、 $\pi \approx 3.14159$ 。

块级公式——傅里叶变换：

f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi

二次方程求根公式：

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

5. 引用与任务列表

"竹影扫阶尘不动，月穿潭底水无痕。" —— 这是博客的座右铭，取自一首禅诗。

Markdown 的引用可以包含多行，甚至嵌套其他块级元素。

任务列表示例：

6. 脚注与分割线

脚注：

MDX 是 Markdown 的扩展¹，它允许在文档中直接嵌入 JSX 组件²。这个博客使用 next-mdx-remote 来编译 MDX 内容³。

水平分割线：

分割线常用于在视觉上分隔不同的内容区块，保持文章的节奏感。

以上测试覆盖了本博客目前支持的绝大部分渲染能力。如果你发现任何渲染异常，欢迎通过评论反馈。

MDX + Markdown 语法测试

MDX 能力

1. 变量插值

2. 内联 JSX 与自定义样式

高级交互式 JSX 卡片

3. 条件渲染与 JSX 表达式

4. 列表映射

基础 Markdown 语法

1. 基础排版

2. 列表与表格

3. 多语言代码高亮

4. 数学公式

5. 引用与任务列表

6. 脚注与分割线

相关标签

评论

MDX + Markdown 语法测试

MDX 能力

1. 变量插值

2. 内联 JSX 与自定义样式

高级交互式 JSX 卡片

3. 条件渲染与 JSX 表达式

4. 列表映射

基础 Markdown 语法

1. 基础排版

2. 列表与表格

3. 多语言代码高亮

4. 数学公式

5. 引用与任务列表

6. 脚注与分割线

相关标签

评论

MDX 能力

1. 变量插值

2. 内联 JSX 与自定义样式

高级交互式 JSX 卡片

3. 条件渲染与 JSX 表达式

4. 列表映射

基础 Markdown 语法

1. 基础排版

2. 列表与表格

3. 多语言代码高亮

4. 数学公式

5. 引用与任务列表

6. 脚注与分割线

Footnotes

相关标签

评论

MDX 能力

1. 变量插值

2. 内联 JSX 与自定义样式

高级交互式 JSX 卡片

3. 条件渲染与 JSX 表达式

4. 列表映射

基础 Markdown 语法

1. 基础排版

2. 列表与表格

3. 多语言代码高亮

4. 数学公式

5. 引用与任务列表

6. 脚注与分割线

Footnotes

相关标签

评论