Markdown 转长图工具使用指南

📌 简介

Markdown 转长图工具是一款专为技术博主、自媒体作者和社群运营者设计的在线神器。在朋友圈、小红书、微博或微信群分享技术文章时，如果直接发文字链接，打开率往往很低。如果发一张排版精美、带有代码高亮和清晰层级的长图，往往能吸引大量阅读。本工具可以将您写好的 Markdown 源码，瞬间渲染成极简风格的长图，一键保存到本地。

📖 渲染与截图技术

本工具的实现完全依赖前端技术。第一步是“渲染”：引入 `marked.js` 库，将左侧纯文本的 Markdown 语法转换为浏览器能识别的 HTML 标签（如将 `# 标题` 变为 `

标题

`），同时为了美观，内置了现代化的排版 CSS（例如绿色的引用块边框、深色的代码块背景）。第二步是“截图”：引入 `html2canvas` 库，这个库非常强大，它通过读取 DOM 节点的所有样式和结构，在后台的 Canvas 画布上逐像素绘制出来，最后导出为 2 倍分辨率的清晰 PNG 图片。整个过程不需要任何后端服务器参与。

💼 常见应用场景

• 小红书技术分享： 将代码片段和教程转成多张好看的图文。
• 朋友圈长文： 避开字数折叠限制，一张图展示全部核心观点。
• 社群讲课： 提取 Markdown 笔记中的重点，作为讲义图片发送给学员。

⚙️ 使用步骤

1. 在左侧输入 Markdown 源码。
2. 右侧会实时渲染出带有排版样式的效果。
3. 确认效果无误后，点击下方“生成并下载长图”。
4. 生成的图片会自动保存到您的电脑中。

⚠️ 注意事项

• 如果在 Markdown 中插入了外部图片（如网络链接），由于浏览器的跨域安全策略（CORS），截图时图片可能会显示为空白。建议使用本地图片或支持 CORS 的图床。
• 为了保证图片清晰度，工具默认采用 2 倍缩放（Retina级别）生成，因此超大文档的渲染可能需要等待几秒钟。

❓ 常见问题 (FAQ)