一个在浏览器中运行的结构化内容视觉工作台。支持 Markdown、代码、Mermaid、LaTeX 和 README;免费导出不限次数,并保留画布中显示的 MarkGleam 品牌署名。
- GitHub Flavored Markdown、代码高亮、KaTeX 数学公式和 Mermaid 图表
- 八套原创内容主题、独立界面明暗模式、自定义字体、背景、画布尺寸和作用域内自定义 CSS
- PNG、JPEG、WebP、SVG、PDF、剪贴板和长图分片 ZIP
- Markdown 长图、小红书长文图片、PDF、Mermaid、公式、代码、GitHub README 和批量转换专用页面
- 专用页面提供当前工具推荐设置;全局样式与导出设置可一键重置并撤销
- X、LinkedIn、微信公众号头图等画布预设;PDF 支持页眉、页脚和页码
- Markdown 文件、图片拖放导入和浏览器本地自动保存
- 简体中文、English、日本語界面;首次访问跟随浏览器语言,主动选择后记住偏好
- 所有内容和导出均在浏览器本地处理
- 极简、摄影参数和印章三种品牌署名样式
需要 Node.js 22 或更新版本。
npm install
npm run dev常用检查:
npm run lint
npm test
npm run build
npm run test:e2e首次运行端到端测试前,需要安装 Playwright 浏览器:
npx playwright install chromium firefox webkit端到端测试使用独占端口启动本地服务,不会复用其他项目的开发服务器。正式发布前的测试范围、人工体验结果和剩余风险记录在 发布质量审计。GitHub Pages 工作流也会在部署前运行 Chromium 端到端测试。
- 复制图片依赖
ClipboardItem和安全上下文,不支持时会自动下载 PNG。 - 远程图片受原站 CORS 策略约束。将图片下载到本地后拖入编辑器最可靠。
- “自适应长图”分片用于规避浏览器画布上限,每张高度会随内容变化;“固定页面”会补齐为统一高度。两种模式都优先在内容块之间分页,品牌署名只出现在最后一张。
- 本地上传的图片和字体保存在 IndexedDB;Markdown 与设置保存在 localStorage。
顶部“小红书长文图片”工具会把 Markdown 按内容块分页,默认导出一组 1080×1440、1× 的 PNG 并打包为 ZIP。预览中的虚线和页码表示每一页从哪个标题、段落或表格开始;独立一行的 <!-- pagebreak --> 可以手动开始新页。
下载后需要先解压 ZIP,再按文件名顺序从小红书“上传图文”选择 PNG。该产物不是小红书原生“写长文”工程,不能直接导入原生编辑器。右侧普通“小红书图文”画布只设置 1080×1440 的最小画布,适合单张内容,不会自动把长文变成固定页面。
每个专用工具页都在右侧显示该工具的推荐画布与导出设置。例如,小红书长文图片会恢复为 1080×1440、1×、固定分页和 ZIP;Markdown 长图会恢复为自适应长图、2× 和 ZIP;Markdown PDF 会恢复为 A4 与 PDF。恢复工具推荐设置只修改该工具负责的画布与导出选项,会保留主题、排版、署名、自定义 CSS 和文件名。
“重置全部样式与导出设置”会恢复全局主题、画布、署名、导出选项与高级样式;在专用工具页内仍会保留该工具的推荐输出契约。两种操作都不会修改正文、各类草稿、界面语言、明暗模式、代码语言或界面布局,并可在底部提示中撤销。
仓库内置 GitHub Actions 工作流。创建公开仓库并推送 main 分支后,在 GitHub 仓库的 Settings → Pages → Build and deployment 中选择 GitHub Actions。
Vite 使用根路径资源,生产站应部署在域名根目录。当前 canonical、静态工具页和 sitemap 都指向:
https://markgleam.com/
如果改用 https://chess99.github.io/markdown-to-image/ 这类项目子路径,需要同时调整 Vite base、canonical、sitemap 和静态页生成逻辑,不能直接复用当前构建产物。
仓库通过 public/CNAME 固定部署到 markgleam.com。旧域名跳转和 www 域名规范化需要在 DNS/CDN 平台配置。
生产环境会在页面加载完成后的浏览器空闲时段接入 Google Analytics 4 与百度统计,本地开发和 127.0.0.1 预览不会上报。
- 默认 GA4 Measurement ID:
G-XRTY7G7G3Y - 默认百度统计站点 ID:
4c713833827d4fad6f6bc4800c163cee - 自定义事件:
export_completed,只包含导出格式、倍率和分片数量
如需在其他部署环境覆盖默认统计配置,可在构建时设置:
VITE_GOOGLE_MEASUREMENT_ID=G-XXXXXXXXXX
VITE_BAIDU_ANALYTICS_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxGA4 沿用迁移前的数据流以保留历史连续性;百度统计使用 markgleam.com 的独立站点 ID。两者都可以通过环境变量覆盖。
MarkGleam 没有内容服务器。Markdown、本地图片、字体、文件名和导出文件不会上传。生产站点会向 Google Analytics 与百度统计发送页面访问和不含内容的导出事件;使用远程图片链接时,浏览器会直接向图片原地址发起请求。
- 保留样式 PDF:把主题预览按页生成图片型 PDF,适合分享和保留视觉效果;文字会转为图片。
- 打印 / 可搜索 PDF:使用浏览器原生分页,默认采用白底、11pt 正文和省墨配色;文字可搜索、复制,可直接选择打印机或另存为 PDF。
- “100 页以上优先快速导出”仅影响保留样式 PDF:开启后会适度降低清晰度以显著缩短耗时、减小文件,关闭后严格使用所选清晰度和图片质量;100 页以下不受影响。
- A4/Letter、纵向/横向、页边距和
<!-- pagebreak -->同时适用于两种模式;---始终是普通水平分隔线。 - 历史更新页面保留直接访问地址
#/changelog,不占用产品内的帮助菜单。
打印实现、浏览器行为和已知边界见 打印工作流说明。
MarkGleam 源代码采用 Functional Source License 1.1,MIT Future License(FSL-1.1-MIT)。你可以查看、复制、修改和再分发代码,并将其用于内部使用、非商业教育、非商业研究等非竞争性用途。
在每个版本发布后的两年内,不得将该版本作为能够替代 MarkGleam、替代版权方基于 MarkGleam 提供的产品或服务,或提供相同及实质相似功能的商业产品或服务向他人提供。每个版本发布满两年后,该版本自动获得 MIT 许可证授权。需要竞争性商业使用授权时,请联系版权方。
本项目是源码可见软件,不是 OSI 定义的开源软件。本次许可证变更不追溯影响此前已经按照 MIT 许可证发布的版本。
MarkGleam 名称、Logo、产品标识及其他品牌资产不随源代码授权;除注明软件来源外,许可证不授予使用这些品牌资产的权利。
MarkGleam is a local-first workspace for turning Markdown, code, diagrams and formulas into share-ready visuals. Free exports include the brand signature shown on the canvas. Run npm install && npm run dev to start.
MarkGleam is licensed under the Functional Source License 1.1, MIT Future License (FSL-1.1-MIT). Competing commercial use is prohibited for two years after each version is released; that version then becomes available under the MIT License. MarkGleam names, logos, product identities, and other brand assets are not licensed with the source code. Versions previously released under the MIT License remain available under their original terms.