Md2Pic
Markdown → Picture
自由
小红书
设置
导出PNG
PDF
HTML
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
导出
左上角署名:
取消
应用