博客跑起来了：MDX 排版与交互特性测试

欢迎来到这个博客。项目参考了两个来源：架构来自 xdd/starter 的 Next.js web 应用（App Router、路由组、组件按功能内聚），内容组织来自 joye-blog 的约定（博客按文件夹、笔记按单文件）。

本文档同时作为全站 MDX 渲染能力的综合测试页面，覆盖文本排版、代码高亮、数学公式、多媒体（图片灯箱、视频播放）与交互组件。

内容与文件约定#

文章放在 content/blog/，每篇文章一个独立文件夹：

content/blog/
  20260615-hello-blog/
    post.mdx

文件夹名即 URL 中的 slug，本文地址为 /blog/20260615-hello-blog。笔记放在 content/notes/，每条笔记为一个独立的 .md 文件。

中文与文本排版增强#

针对中文技术排版，解析器已集成 remark-cjk-friendly，解决 CommonMark 规范中加粗紧贴全角标点不解析的边界问题：

• 中文紧贴逗号：加粗文本，在标准 CommonMark 容易失效，现在正常解析。
• 中文紧贴句号：重点语句。同样保持正常粗体样式。
• 组合修饰：斜体文本、中划线删除，以及代码字面量 const answer = 42。
• 链接增强：站内关于页面 会自动被转为 Next.js 客户端路由，而 GitHub 外部链接 会在新窗口安全打开。

LaTeX 数学公式#

集成 remark-math 与 rehype-katex，支持行内公式与跨行块级公式排版。

行内公式示例：质能方程 $E = mc^2$，欧拉恒等式 $e^{i\pi} + 1 = 0$。

块级复杂积分与极限公式：

矩阵与变换公式排版：

代码块语法高亮与一键复制#

基于 rehype-pretty-code（Shiki 引擎），自动适配 Catppuccin 双主题（浅色 Latte、深色 Mocha）。右上角提供一键复制代码按钮，支持文件名标题与右下角语言徽标。

import { createServer } from 'node:http'
 
const server = createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' })
  res.end(JSON.stringify({ status: 'ok', time: Date.now() }))
})
 
server.listen(4400, () => {
  console.log('Server is running on http://localhost:4400')
})

Python 语言与行高亮示例：

def compute_metrics(predictions, targets):
    correct = sum(p == t for p, t in zip(predictions, targets))
    accuracy = correct / len(targets)
    return {
        "accuracy": accuracy,
        "total_samples": len(targets)
    }

多媒体展示：图片灯箱与视频播放#

1. 正文图片灯箱（点击平滑全屏放大）#

正文中的图片已配置灯箱组件，鼠标移动到图片上方时光标呈放大镜形态，点击即可全屏平滑放大预览；点击黑色遮罩区域或按键盘 ESC 键即可退出放大。

2. 视频流媒体播放#

正文已内置 <Video> 组件，支持原生控制条、移动端全屏播放以及居中标题说明。

语义交互组件#

1. Callout 提示卡片#

支持四种语义级别，自动匹配对应图标与边框色彩：

2. Collapse 折叠面板#

用于在正文中收纳长代码、配置文件或调试日志，默认折叠，点击展开：

# 环境变量与系统运行信息
NODE_VERSION=v22.19.0
NEXT_PUBLIC_SITE_URL=https://joyehuang.me
THEME_DEFAULT=system
TURBOPACK=true

响应式表格排版#

宽表格自动包裹横向滚动容器，移动端浏览时横向滑动查看，不会撑破页面外层宽度：