应用截图工坊公众号文章排版工具

左边写 Markdown，右边实时预览公众号排版，一键复制粘贴到公众号后台。全部在浏览器本地完成，不登录、不保存、不上传。

Markdown 输入529 字
公众号预览

这是一篇示例文章（文章标题请填在公众号后台的标题栏里）。左边改 Markdown，右边实时看到公众号里的样子；点右上角「复制到公众号」，再到公众号后台粘贴。

一、先确认尺寸

App Store 目前只要求上传一套 iPhone 截图，其他机型会自动缩放。我们自己上架时，习惯先把尺寸和张数定下来，再开始做设计。

•

平台：iOS / Android

•

关键词：商店截图、ASO

•

工具：应用截图工坊[1]

▍常见尺寸对照

平台 尺寸（像素） 说明
iPhone 6.9″ 1320 × 2868 竖屏
Google Play 1080 × 1920 9:16

二、批量导出

1.

拖入所有截图

2.

勾选需要的商店尺寸

3.

打包下载 ZIP

☑

去除透明通道

☐

检查文件体积

// 计算截图比例
function ratio(w, h) {
  return (w / h).toFixed(3);
}
console.log(ratio(1320, 2868)); // 0.460

正文里的 行内代码、斜体 和 删除线 也都支持。外部链接会自动变成文末的脚注，因为公众号正文里只有公众号文章链接可以点击。

参考链接

[1] https://appshotmaker.com

实时预览行 1，列 115px · 1.75 · #10b981本地处理，不上传、不保存

这个工具能做什么

公众号后台的编辑器不认 Markdown，直接粘贴会丢掉所有格式；它还会去掉 class 和 <style>，把原生列表打乱，正文里除了公众号文章链接，其他外链都点不开。我们自己写上架教程、发版说明时，常常先在 Markdown 里写好，再转成公众号能用的排版，这个工具就是为这个流程做的。 左边粘贴或输入 Markdown，右边按公众号正文宽度实时预览，可以切换手机和电脑宽度。排版风格有经典左竖条、色块标题和简约下划线三种，主题色有 8 个预设，也可以自定义；正文字号 14–17px、行高、代码浅色或深色配色、Mac 窗口样式都能调。转换时每个元素的样式都直接写进 style 属性；列表用自绘的圆点、序号和勾选框代替原生 <ul>/<ol>，多级列表粘贴后也不会错乱；代码块带语法高亮，缩进和换行保留；表格可横向滚动；外部链接会变成文末的编号脚注，公众号文章链接保持可点。写好后点「复制到公众号」，在公众号后台正文里粘贴即可，也可以复制 HTML 源码或下载 HTML 文件。 整个过程在浏览器里完成，文字不上传服务器。按照“不登录、不保存”的原则，这个工具没有账号、草稿和历史记录，也不把文章写进浏览器存储，关闭或刷新页面内容就会清空，原稿请在自己的编辑器里保留。

使用步骤

  1. 在左侧粘贴或输入 Markdown，也可以点“导入”或把 .md / .txt 文件拖进编辑区；点“示例”可以先看效果。
  2. 选择排版风格、主题色、字号、行高和代码配色，按需开启“外链转脚注”“中英文间加空格”，右侧实时预览。
  3. 点“复制到公众号”，打开公众号后台的图文编辑器，在正文里粘贴（Ctrl/⌘ + V）；用手机预览核对一遍再群发。

常见问题

为什么直接把 Markdown 或网页内容粘贴到公众号，格式会乱？

公众号编辑器会去掉 <style> 标签和 class 属性，只保留写在元素上的 style 内联样式，还会改写原生列表。这个工具输出的每个标题、段落、引用、代码块和表格都带有自己的内联样式，列表用自绘符号实现，所以粘贴后能保持预览里的样子。

图片怎么处理？

用 ![说明](图片网址) 插入公网可访问的图片，粘贴到公众号后，编辑器会自动把图片转存到微信服务器。本地图片没有网址，粘贴不过去，请在公众号编辑器里另外上传。图片下方会显示说明文字（优先用 title，没有就用 alt）。

链接为什么变成了文末脚注？

公众号正文里只有 mp.weixin.qq.com 的文章链接可以点击，其他外链读者点不开。开启“外链转脚注”后，外部链接的文字会带上 [1]、[2] 编号，网址统一列在文末“参考链接”里；公众号文章链接保持可点击。关闭这个选项则全部保留为普通链接。

会保存我的文章吗？有没有登录或历史记录？

不会。没有登录，没有云端保存，也没有草稿和历史记录，文章不会写进 localStorage 等浏览器存储。内容只在当前页面里，关闭或刷新就清空，请在自己的编辑器或笔记软件里保留原稿。

支持哪些 Markdown 语法？

支持标题、段落、加粗、斜体、删除线、行内代码、围栏代码块（JavaScript、TypeScript、Python、Swift、Kotlin、Java、Go、Rust、SQL、Shell、JSON、YAML 等常用语言高亮）、引用、有序 / 无序 / 多级列表、任务列表、表格（含对齐）、图片、分隔线和链接。为了安全，Markdown 里的原始 HTML 会按文本显示，不会执行。

用了哪些开源项目？许可如何？

Markdown 解析使用 markdown-it（MIT 许可），及其依赖 linkify-it、mdurl、uc.micro、punycode.js（MIT）和 entities（BSD-2-Clause）；代码高亮使用 highlight.js（BSD-3-Clause）。均允许商用，许可全文见 /vendor/wechat-md/LICENSES.txt。排版样式和转换规则为本站自行编写。

相关文章和工具

小红书 / 微信贴图号图文卡片图片转 GIF图片压缩推特 / OG 分享图

更多工具见开发者工具箱；要做应用商店预览图，可以用App Store 截图生成器。