WeChat Article Markdown Formatter

Write Markdown on the left, see the WeChat Official Account layout on the right, then copy it into the WeChat editor in one click. Runs in your browser — no login, nothing saved or uploaded.

Markdown958 chars
WeChat preview

This is a sample article (put the article title in WeChat's own title field). Edit the Markdown on the left and watch the WeChat layout on the right; click Copy for WeChat, then paste into the WeChat Official Account editor.

1. Lock the sizes first

App Store Connect now needs just one set of iPhone screenshots and scales it for other devices. When we ship our own apps, we settle the sizes and count before any design work.

•

Platforms: iOS / Android

•

Keywords: store screenshots, ASO

•

Tool: AppShot Maker[1]

▍Common sizes

Store Size (px) Note
iPhone 6.9″ 1320 × 2868 Portrait
Google Play 1080 × 1920 9:16

2. Batch export

1.

Drop in every screenshot

2.

Tick the store sizes you need

3.

Download the ZIP

☑

Remove the alpha channel

☐

Check file sizes

// screenshot aspect ratio
function ratio(w, h) {
  return (w / h).toFixed(3);
}
console.log(ratio(1320, 2868)); // 0.460

Inline code, italics and strikethrough work too. External links turn into numbered footnotes at the end, because WeChat only lets readers tap links to other WeChat articles.

References

[1] https://appshotmaker.com/en

Live previewLn 1, Col 115px · 1.75 · #10b981Local only — not uploaded or saved

What this tool does

The WeChat Official Account editor doesn't understand Markdown. Paste raw Markdown or a web page into it and the formatting falls apart: it strips <style> tags and class names, rewrites native lists, and only lets readers tap links to other WeChat articles. We draft our own release notes and store-listing guides in Markdown, so we built this formatter to turn that source into a layout WeChat keeps. Paste or type Markdown on the left and the right pane previews the article at WeChat's phone or desktop width as you type. Pick one of three layouts (classic bar, color block or minimal), one of eight accent colors or your own, a 14–17px body size, line height, light or dark code colors and an optional Mac-window frame. Every element gets its styles written inline. Lists use drawn bullets, numbers and checkboxes instead of <ul>/<ol>, so nested lists survive the paste. Code blocks keep their indentation and get syntax highlighting, tables scroll sideways on phones, and external links become numbered footnotes while mp.weixin.qq.com links stay clickable. Click Copy for WeChat and paste into the article body, or copy the HTML source or download an HTML file. Everything runs in your browser and nothing is uploaded. There is deliberately no login, no saved drafts and no history; the text is not written to browser storage either, so it's gone when you close or reload the page. Keep your source in your own editor.

How to use

  1. Paste or type Markdown on the left, click Import or drop a .md / .txt file onto the editor, or load the sample to see how it looks.
  2. Choose a layout, accent color, body size, line height and code colors; turn link footnotes or CJK–Latin spacing on or off while the preview updates.
  3. Click Copy for WeChat, open the article editor in your Official Account dashboard and paste into the body (Ctrl/⌘ + V). Check it in the phone preview before you publish.

FAQ

Why does formatting break when I paste Markdown or a web page into WeChat?

The WeChat Official Account editor removes <style> tags and class attributes, keeps only inline style attributes, and rewrites native lists. This tool writes inline styles on every heading, paragraph, quote, code block and table, and draws list markers itself, so the article looks the same after pasting as it does in the preview.

How are images handled?

Insert publicly reachable images with ![caption](image URL). After you paste, WeChat copies them to its own servers. Local images have no URL and won't come across, so upload those in the WeChat editor instead. The caption under each image uses the title, or the alt text if there is no title.

Why did my links turn into footnotes?

In a WeChat article body, readers can only tap links to mp.weixin.qq.com articles; other links do nothing. With Links → footnotes on, linked text gets a [1], [2] marker and the URLs are listed under References at the end, while WeChat article links stay clickable. Turn the option off to keep every link as a normal link.

Is my article saved? Is there a login or history?

No. There's no login, no cloud saving, no drafts and no history, and the article is not written to localStorage or any other browser storage. It lives only in the open page and disappears when you close or reload it, so keep your source in your own editor or notes app.

Which Markdown syntax is supported?

Headings, paragraphs, bold, italic, strikethrough, inline code, fenced code blocks (highlighting for JavaScript, TypeScript, Python, Swift, Kotlin, Java, Go, Rust, SQL, Shell, JSON, YAML and more), quotes, ordered, unordered and nested lists, task lists, tables with alignment, images, horizontal rules and links. For safety, raw HTML inside the Markdown is shown as text and never runs.

Which open-source projects are used, and under what license?

Markdown parsing uses markdown-it (MIT) with its dependencies linkify-it, mdurl, uc.micro and punycode.js (MIT) and entities (BSD-2-Clause); syntax highlighting uses highlight.js (BSD-3-Clause). All allow commercial use; full texts at /vendor/wechat-md/LICENSES.txt. The layouts and conversion rules are our own code.

Related guides & tools

Xiaohongshu (RedNote) text cardsImage to GIF makerImage compressorOG image & Twitter card generator

More tools in thedeveloper toolbox. For store preview shots, try theApp Store screenshot maker.