Apr 25, 2026

MDX 增强功能演示

MDX 是 Markdown 的超集，支持在文章中直接使用 HTML 元素。以下是几种在技术博客中最常用的增强写法。

可折叠区块

适合放置完整配置文件、详细说明等不需要默认展开的内容：

点击展开：完整的 Nginx 反向代理配置

server {
    listen 80;
    server_name blog.kaienku.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name blog.kaienku.com;

    ssl_certificate /etc/letsencrypt/live/kaienku.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/kaienku.com/privkey.pem;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

点击展开：Docker Compose 示例

version: '3.8'
services:
  app:
    image: node:20-alpine
    working_dir: /app
    volumes:
      - .:/app
    ports:
      - '3000:3000'
    command: npm start
    environment:
      - NODE_ENV=production

  db:
    image: postgres:16
    environment:
      POSTGRES_USER: admin
      POSTGRES_PASSWORD: secret
      POSTGRES_DB: myapp
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

提示框

三种语义级别，用内联 HTML 实现：

💡 提示
这是信息提示框，适合补充说明或背景知识，不打断阅读流程。

⚠️ 注意
执行以下操作前请确认已备份数据，部分步骤不可逆。

🚫 危险
rm -rf / 会删除系统所有文件，永远不要执行此命令。

键盘快捷键

<kbd> 标签让快捷键一目了然：

操作	Windows / Linux	macOS
命令面板	`Ctrl` + `Shift` + `P`	`⌘` + `Shift` + `P`
快速打开文件	`Ctrl` + `P`	`⌘` + `P`
添加多光标	`Alt` + 点击	`⌥` + 点击
格式化代码	`Shift` + `Alt` + `F`	`⇧` + `⌥` + `F`
终端	`Ctrl` + `	`⌃` + `

代码前后对比

同一功能的写法演进，Markdown 原生不支持并排，但可以用标题区分：

重构前（回调风格）：

function loadUser(id, callback) {
  db.query('SELECT * FROM users WHERE id = ?', [id], (err, rows) => {
    if (err) return callback(err);
    if (!rows.length) return callback(new Error('用户不存在'));
    callback(null, rows[0]);
  });
}

重构后（async/await）：

async function loadUser(id) {
  const rows = await db.query('SELECT * FROM users WHERE id = ?', [id]);
  if (!rows.length) throw new Error('用户不存在');
  return rows[0];
}

内联文字增强

标准 Markdown 不支持的格式，通过 HTML 标签实现：

高亮：这段文字被标记了
下标：H₂O、CO₂
上标：E = mc²
删除线：~~这个 API 已废弃，请勿使用~~
缩写：API（鼠标悬停可见全称）

以上是 MDX 在技术博客场景中最实用的几种写法。实际使用时，提示框和可折叠区块覆盖了绝大多数需求。