Md2Pic - Markdown to Picture

Markdown

# Md2Pic Feature Showcase

> Render Markdown. Export pixels. Zero build pipeline.

:::card info
这是一个功能展示页，涵盖 Md2Pic 支持的所有渲染能力。试试修改左侧内容，右侧会实时更新。
:::

## 数学公式

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

块级公式：

$$
\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}
$$

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

化学方程式：$\ce{2H2 + O2 -> 2H2O}$

## 流程图

```mermaid
graph LR
    A[Markdown] --> B[marked.js]
    B --> C{渲染器}
    C --> D[KaTeX]
    C --> E[Mermaid]
    C --> F[ECharts]
    D --> G[导出]
    E --> G
    F --> G
```

## 数据可视化

```echarts
{
  "tooltip": {},
  "xAxis": { "type": "category", "data": ["KaTeX", "Mermaid", "ECharts", "Prism", "html2canvas"] },
  "yAxis": { "type": "value", "name": "使用频率" },
  "series": [{ "type": "bar", "data": [95, 78, 65, 88, 100], "itemStyle": { "color": "#5B5BD6" } }]
}
```

## 代码高亮

```javascript
async function exportToPNG(markdown) {
  const dom = createExportNode(markdown);
  await renderMath(dom);
  await renderDiagrams(dom);
  return html2canvas(dom, { scale: 2 });
}
```

## 表格

| 模式 | 说明 | 输出文件 |
|------|------|----------|
| 自由 | 单张图片，高度自适应 | `md2pic-{ts}.png` |
| 小红书 | 3:4 分页，不截断元素 | `md2pic-xhs-*.png` |

## Callout 卡片

:::card success
导出为 PNG / PDF / HTML，工具栏一键操作。
:::

:::card warning
小红书模式下图表会单独占一页，避免跨页截断。
:::

> [!note] Obsidian 语法兼容
> 同时支持 `:::card` 和 `> [!type]` 两种写法。

预览

100%

设置

文字

文字大小：

18px

布局

整体宽度：

640px

卡片边距：

40px

导出

左上角署名：