# Markdown → Image 转换器

> 将任何 Markdown 内容转为精美长图，支持代码、表格、流程图、数学公式等。

## 代码高亮

```typescript
// 类型安全的异步图片生成
async function generateImage(markdown: string, theme: Theme): Promise<Blob> {
  const html = await renderMarkdown(markdown);
  return toPng(html, { width: 750, pixelRatio: 2 });
}
```

```python
def fibonacci(n: int) -> list[int]:
    a, b = 0, 1
    result = []
    while a < n:
        result.append(a)
        a, b = b, a + b
    return result

print(fibonacci(100))
```

## 表格

| 功能 | 支持 | 说明 |
|------|------|------|
| 代码高亮 | ✅ | 30+ 语言 |
| Mermaid 图 | ✅ | 流程图/时序图/甘特图 |
| 数学公式 | ✅ | KaTeX 渲染 |
| 表格 | ✅ | GFM 标准表格 |
| 嵌套列表 | ✅ | 有序 / 无序 |
| 引用块 | ✅ | 样式美观 |
| 内联代码 | ✅ | 主题配色 |

## Mermaid 流程图

```mermaid
graph TD
    A[输入 Markdown] --> B{选择主题}
    B --> C[GitHub 亮色]
    B --> D[Cyberpunk 暗色]
    B --> E[其他 8 种主题]
    C --> F[生成 750px 长图]
    D --> F
    E --> F
    F --> G[下载 PNG]
    F --> H[复制到剪贴板]
```

```mermaid
sequenceDiagram
    participant 用户
    participant 编辑器
    participant 渲染引擎
    participant 导出模块

用户->>编辑器: 输入 Markdown
    编辑器->>渲染引擎: 实时解析
    渲染引擎-->>用户: 主题预览
    用户->>导出模块: 点击生成
    导出模块->>渲染引擎: 请求 750px 快照
    渲染引擎-->>导出模块: Canvas 数据
    导出模块-->>用户: PNG 图片
```

## 列表支持

### 无序列表
- **加粗内容** 与普通文字混排
- *斜体* 和 `行内代码` 同样支持
  - 嵌套层级一
    - 嵌套层级二
- 链接：[示例网站](https://example.com)

### 有序列表
1. 打开编辑器，粘贴你的 Markdown
2. 从 **10 种主题** 中选择喜欢的风格
3. 点击「生成图片」
4. 下载或复制到剪贴板

## 引用与分割线

> 优秀的写作不在于字数，而在于每个字的重量。
> —— 海明威

---

## 数学公式

行内公式：$E = mc^2$，$\sqrt{a^2 + b^2} = c$

块级公式：

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$

## 甘特图

```mermaid
gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计
    UI 设计         :done,    des1, 2024-01-01, 2024-01-07
    主题开发         :done,    des2, 2024-01-05, 2024-01-10
    section 开发
    核心功能         :active,  dev1, 2024-01-10, 2024-01-20
    Mermaid 支持     :         dev2, 2024-01-18, 2024-01-25
    section 测试
    功能测试         :         test1, 2024-01-25, 2024-01-30
```

## 图表示例（饼图 / 柱状图）

> Mermaid 饼图稳定支持；柱状图使用 xychart-beta（不同版本 Mermaid 可能有细节差异）。

```mermaid
pie title 流量来源占比
    "搜索" : 42
    "直接访问" : 26
    "社交媒体" : 18
    "其他" : 14
```

```mermaid
xychart-beta
    title "四个月活跃用户"
    x-axis ["1月", "2月", "3月", "4月"]
    y-axis "用户数" 0 --> 120
    bar [35, 52, 78, 102]
```

预览 · 750px 宽GitHub

Markdown → Image 转换器

将任何 Markdown 内容转为精美长图，支持代码、表格、流程图、数学公式等。

代码高亮

// 类型安全的异步图片生成
async function generateImage(markdown: string, theme: Theme): Promise<Blob> {
  const html = await renderMarkdown(markdown);
  return toPng(html, { width: 750, pixelRatio: 2 });
}

def fibonacci(n: int) -> list[int]:
    a, b = 0, 1
    result = []
    while a < n:
        result.append(a)
        a, b = b, a + b
    return result

print(fibonacci(100))

表格

功能	支持	说明
代码高亮	✅	30+ 语言
Mermaid 图	✅	流程图/时序图/甘特图
数学公式	✅	KaTeX 渲染
表格	✅	GFM 标准表格
嵌套列表	✅	有序 / 无序
引用块	✅	样式美观
内联代码	✅	主题配色

Mermaid 流程图

Rendering diagram…

Rendering diagram…

列表支持

无序列表

加粗内容 与普通文字混排
斜体和 行内代码 同样支持
- 嵌套层级一
  - 嵌套层级二
链接：示例网站

有序列表

打开编辑器，粘贴你的 Markdown
从 10 种主题 中选择喜欢的风格
点击「生成图片」
下载或复制到剪贴板

引用与分割线

优秀的写作不在于字数，而在于每个字的重量。 —— 海明威

数学公式

行内公式： $E = mc^2$ ， $\sqrt{a^2 + b^2} = c$

块级公式：

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}

甘特图

Rendering diagram…

图表示例（饼图 / 柱状图）

Mermaid 饼图稳定支持；柱状图使用 xychart-beta（不同版本 Mermaid 可能有细节差异）。

Rendering diagram…

Rendering diagram…