MD 转微信公众号

将 Markdown 转为适合微信公众号粘贴的排版 HTML，支持主题、字号、对齐和水印设置。

主题

字号

行高

字间距

段前距

段后距

对齐

首行缩进

移除图片边框

添加底部水印

Markdown 输入

# 🎯 多主题深色模式兼容性测试文案

> 本文用于测试 Markdown 转公众号格式的所有元素，在不同主题和深浅色模式下的显示效果。

---

## 一、基础文本元素

### 1.1 标题层级

这是普通段落文字。微信公众号文章通常使用 **H1 作为文章标题**，**H2 作为章节标题**，**H3 作为小节标题**。

### 1.2 文字样式

- **加粗文字**：用于强调重点内容
- *斜体文字*：用于引用或特殊说明
- ~~删除线~~：用于表示过时或错误内容
- **加粗和*斜体*混合**：复杂强调场景

### 1.3 行内代码

在 React 中使用 `useState` 来管理状态，或者使用 `console.log()` 来调试代码。CSS 变量通过 `--bg-primary` 来定义。

---

## 二、引用与提示

### 2.1 普通引用块

> 这是一段引用文字。引用块通常用于引用名人名言、重要观点或者需要特别突出的内容。
> 
> 多段引用也可以正常显示，保持格式一致。

### 2.2 多层嵌套引用

> 第一层引用内容
>> 第二层嵌套引用
>>> 第三层嵌套引用，用于表示更深层次的引用关系

---

## 三、代码展示

### 3.1 行内代码

设置背景色使用 `background-color: var(--bg-primary)`，文字颜色使用 `color: var(--text-primary)`。

### 3.2 代码块（JavaScript）

```javascript
// 主题切换 Hook
const useTheme = () => {
  const [theme, setTheme] = useState('default');
  const [mode, setMode] = useState('system');

useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = (e) => {
      if (mode === 'system') {
        document.documentElement.setAttribute(
          'data-theme-mode', 
          e.matches ? 'dark' : 'light'
        );
      }
    };

mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, [mode]);

return { theme, setTheme, mode, setMode };
};
```

### 3.3 代码块（CSS）

```css
/* 赛博朋克主题 - 深色模式 */
[data-theme="cyberpunk"] {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --text-primary: #e0e0e0;
  --accent-primary: #00f5ff;
  --accent-secondary: #ff006e;
  --shadow-glow: 0 0 20px rgba(0, 245, 255, 0.3);
}

.neon-text {
  text-shadow: 
    0 0 10px var(--accent-primary),
    0 0 20px var(--accent-primary),
    0 0 40px var(--accent-primary);
}
```

### 3.4 代码块（Python）

```python
def generate_theme_css(themes):
    css_lines = []

for theme_key, theme in themes.items():
        css_lines.append(f'[data-theme="{theme_key}"] {{')
        for var, value in theme['light'].items():
            css_lines.append(f'  --{var}: {value};')
        css_lines.append('}')

css_lines.append('@media (prefers-color-scheme: dark) {')
        css_lines.append(f'  [data-theme="{theme_key}"] {{')
        for var, value in theme['dark'].items():
            css_lines.append(f'    --{var}: {value};')
        css_lines.append('  }')
        css_lines.append('}')

return '\n'.join(css_lines)
```

---

## 四、列表元素

### 4.1 无序列表

- **默认简约主题**：适合科技、教程类文章，配色清爽专业
- **赛博朋克主题**：霓虹色强调，适合科技前沿、AI 相关内容
- **温暖复古主题**：米黄暗红配色，适合文化、历史类内容
- **清新自然主题**：森林绿色调，适合健康、环保类文章
- **高对比主题**：纯黑纯白，适合长时间阅读场景

### 4.2 多级无序列表

- 一级列表项
  - 二级列表项
    - 三级列表项
    - 另一个三级项
  - 另一个二级项
- 另一个一级项

### 4.3 有序列表

1. 第一步：安装依赖 `npm install react-markdown`
2. 第二步：配置主题系统
   1. 定义主题配置对象
   2. 创建 CSS 变量生成函数
   3. 实现主题切换 Hook
3. 第三步：渲染 Markdown 内容
4. 第四步：测试深浅色模式切换

### 4.4 任务列表

- [x] 实现基础 Markdown 解析
- [x] 添加 CSS 变量系统
- [x] 支持深色模式媒体查询
- [x] 实现多主题切换
- [ ] 添加动画过渡效果
- [ ] 优化移动端显示

---

## 五、表格展示

### 5.1 主题对比表

| 主题名称 | 浅色背景 | 深色背景 | 强调色 | 适用场景 |
|---------|---------|---------|--------|---------|
| 默认简约 | #ffffff | #0d0d0d | #ff6b6b | 科技教程 |
| 赛博朋克 | #ffffff | #0a0a0f | #00f5ff | 前沿科技 |
| 温暖复古 | #faf8f3 | #1a1510 | #8b4513 | 文化历史 |
| 清新自然 | #ffffff | #0d1f17 | #2d6a4f | 健康环保 |
| 高对比 | #ffffff | #000000 | #ffff00 | 长文阅读 |

### 5.2 兼容性测试表

| 元素类型 | 浅色模式 | 深色模式 | 备注 |
|---------|---------|---------|------|
| 标题 H1-H3 | 正常 | 正常 | 颜色自动切换 |
| 段落文字 | 正常 | 正常 | 跟随主题变量 |
| 引用块 | 正常 | 正常 | 背景色+边框色同步 |
| 代码块 | 正常 | 正常 | 语法高亮保持 |
| 行内代码 | 正常 | 正常 | 背景对比度适中 |
| 表格 | 正常 | 正常 | 斑马纹交替 |
| 列表 | 正常 | 正常 | 标记颜色跟随强调色 |
| 分割线 | 正常 | 正常 | 渐变或虚线 |
| 图片 | 正常 | 需调整 | 深色模式降低亮度 |

---

## 六、特殊元素

### 6.1 分割线样式

普通分割线：

---

粗分割线：

***

### 6.2 链接

- 外部链接：[React 官方文档](https://react.dev)
- 内部锚点：[回到顶部](#-多主题深色模式兼容性测试文案)
- 纯文本链接：https://github.com

### 6.3 图片

![主题预览图](https://picsum.photos/800/400?random=1)

*图片说明：深色模式下图片会自动降低亮度（opacity: 0.9），避免刺眼*

### 6.4 高亮框（自定义语法）

:::tip 提示
这是提示信息框，用于给出操作建议或补充说明。在深色模式下背景色会变为深蓝底。
:::

:::warning 注意
这是警告信息框，用于提醒重要事项。在深色模式下背景色会变为深黄底。
:::

:::danger 重要
这是危险/重要信息框，用于强调关键内容。在深色模式下背景色会变为深红底。
:::

---

## 七、复杂排版场景

### 7.1 图文混排

**赛博朋克主题**的深色模式特别适合科技类内容。霓虹青（#00f5ff）和霓虹粉（#ff006e）的对比强烈，视觉冲击力强。

![赛博朋克风格配图](https://picsum.photos/800/300?random=2)

*霓虹色系在深色背景上具有天然的优势，不需要很高的亮度就能产生强烈的视觉焦点。*

### 7.2 多元素组合

> **引用 + 代码组合**
> 
> 在实现主题切换时，核心逻辑是监听 `prefers-color-scheme` 变化：
> ```javascript
> const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
> ```
> 同时支持手动覆盖，优先级高于系统设置。

### 7.3 嵌套复杂结构

1. **主题配置结构**
   - 每个主题包含 `name`、`light`、`dark` 三个属性
   - `light` 和 `dark` 都是完整的颜色变量映射

| 变量名 | 说明 | 示例值 |
   |-------|------|--------|
   | --bg-primary | 主背景 | #ffffff / #0d0d0d |
   | --text-primary | 主文字 | #1a1a1a / #e0e0e0 |
   | --accent-primary | 主强调 | #ff6b6b / #ff8787 |

2. **渲染流程**
   - 解析 Markdown 生成 AST
   - 遍历 AST 映射到 React 组件
   - 注入主题 CSS 输出 HTML 字符串

---

## 八、边界测试

### 8.1 超长内容

这是一段很长的文字，用于测试在移动设备上的换行和行高表现。微信公众号文章通常在手机上阅读，所以行高设置为 1.8，字号 16px，确保阅读舒适度。深色模式下，纯黑底（#000000）虽然对比度最高，但长时间阅读容易产生视觉疲劳，因此推荐使用近黑底（#0d0d0d）配合浅灰字（#e0e0e0）。

### 8.2 特殊字符

代码中的特殊字符：`&` `<` `>` `"` `'`  `*` `_` `{` `}` `[` `]` `(` `)` `#` `+` `-` `.` `!` `|` 等需要正确转义。

数学公式相关：x² + y² = z²，H₂O，E=mc²

### 8.3 空行与缩进

这是有缩进的文字（前面两个空格）。

这是四个空格缩进的代码块效果。

---

## 九、总结

本文测试了 Markdown 转公众号格式所需的**所有核心元素**：

1. 基础文本：标题、段落、加粗、斜体、删除线、行内代码
2. 引用系统：单层引用、多层嵌套引用
3. 代码展示：行内代码、多语言代码块（JS/CSS/Python）
4. 列表系统：无序列表、有序列表、多级列表、任务列表
5. 表格：普通表格、复杂表格、斑马纹
6. 特殊元素：分割线、链接、图片、自定义提示框
7. 复杂场景：图文混排、多元素组合、嵌套结构
8. 边界测试：超长内容、特殊字符、空行缩进

**测试通过标准**：所有元素在5种主题 x 2种模式（浅色/深色）= **10种组合**下都能正常显示，无"白斑"、无颜色突兀、阅读体验一致。

---

> 最后提示：深色模式兼容性不是简单的颜色反转，而是需要为每种主题单独设计深浅两套配色，确保视觉层次、品牌感、阅读舒适度都得到保持。

---

## 使用说明

1. 在左侧编辑器中输入或粘贴 Markdown 内容
2. 在上方工具栏选择喜欢的主题风格
3. 勾选需要的选项（如水印、图片边框）
4. 点击「复制微信格式」按钮
5. 粘贴到微信公众号编辑器中即可

*祝排版愉快！*

*本文由 Markdown 自动生成，用于测试多主题深色模式兼容性。*

公众号预览（默认简约）

输入 Markdown 后此处预览

HTML 输出

转换后的 HTML 代码将显示在这里...