Writing WeChat Articles in Markdown—How to Keep Formatting Intact?

You write cleanly in Obsidian or VS Code, paste into WeChat's backend, and get either raw # and * everywhere or styles that vanish. The root cause is not bad formatting—it is that WeChat's editor and Markdown are two different systems. Once you see that, stable "one-click" layout becomes straightforward.

WeChat's backend is a rich-text editor that only accepts HTML with inline styles, while Markdown is plain-text markup that must be rendered first. Paste ## Heading directly and the editor treats it as ordinary text—# shows up literally.

The subtler problem: even if you copy rendered output from a Markdown preview, styles often disappear because WeChat filters out external CSS and class attributes, keeping only inline style attributes. Most renderers attach styles via classes; once filtered, only bare text remains. "Broken layout" comes in two forms: pasted source, or pasted class-based rendered HTML.

The stable pattern treats your .md as the single source of truth—your writing workflow stays the same, and only at publish time you convert content into inline-styled rich text WeChat can consume. You do not change how you write, and you do not reformat from scratch in the backend every time.

In practice: paste your .md into the Markdown to WeChat tool (or import a .md / .zip / folder). The right panel shows a live preview in real WeChat styling; click "Copy to WeChat" and paste into the backend. The key is that all styles are inlined, so headings, code blocks, and blockquotes carry over intact instead of being stripped by WeChat.

Images are the most tedious part of WeChat layout: your Markdown says ![cover](cover.png) with a local path, and the WeChat backend has no idea where that file lives.

The converter recognizes local image paths and prompts you to upload them. Uploaded images are stored in the browser's IndexedDB (they survive refresh), and when you copy to WeChat, images go with the content. If you already have an "md + images" folder or .zip, import the whole package—images match by filename automatically, without uploading one by one. That removes the repetitive "upload each image + replace each link" loop.

Split by what WeChat can render natively:

WeChat's editor is unfriendly to custom SVG, so diagrams and formulas must go through "convert to image first." If your draft has Mermaid charts, render and export PNG in the Mermaid diagram tool, insert the image back into Markdown, and the converter will carry it into WeChat as a normal image.

Sometimes the need runs the other way: an article is already on WeChat, and you want a .md archive, a blog migration, or version control in your notes. That requires HTML → Markdown.

Open the WeChat article page → view source → copy HTML → paste into the HTML to Markdown tool. It handles WeChat HTML specifically: recognizes figure wrappers, merges code split by <br>, strips redundant inline styles, and outputs clean standard Markdown. Your content returns to a manageable ".md as source" state.

If your article has almost no formatting—plain text, no code, no tables, no images—typing directly in WeChat's backend is fastest; conversion adds little value. The "Markdown source + one-click styling" pattern pays off for technical and knowledge content with code blocks, images, structure, and repeat multi-channel publishing. The more complex the format and the more often you publish, the more reformatting time you save.

WeChat layout breaks because it is a rich-text editor that only accepts inline styles—not Markdown. The stable workflow: keep .md as source, convert at publish time with Markdown to WeChat into inline-styled content, let the tool match and upload local images, turn diagrams/formulas into PNG first, and use HTML to Markdown to archive or migrate published articles. Anchor on "inline styles" and formatting stops breaking.