Markdown 预览原理与 GitHub 风格差异

Markdown renders differently on every platform, and READMEs that look perfect locally can break on GitHub. A good previewer should be the closest faithful stand-in for your target renderer — here is what to check.

The GitHub-flavored core

• Pipe tables with alignment colons — the most broken feature elsewhere.
• Task lists with [x] and [ ] checkboxes.
• Fenced code blocks with triple backticks and a language hint.
• Strikethrough with tildes and autolinks for bare URLs.

The Markdown Previewer covers exactly this core, updates panes in real time and remembers your draft across reloads — handy for writing long READMEs in one sitting.

Sanitization is a feature, not a nuisance

Markdown accepts inline HTML, and pasted HTML can carry script tags. A previewer that executes raw HTML turns a harmless paste into an XSS demo. Strip scripts and escape unknown markup — that is why the preview here silently sanitizes while keeping harmless tags.

Portable markdown checklist

1. Prefer fenced code over indented code — indented blocks clash with list nesting.
2. Avoid HTML divs inside tables; most renderers disagree there.
3. Reference-style links survive renames better than inline URLs.

From markdown to typed code

READMEs often embed JSON examples that later become API types. A quick path: paste the sample into the JSON to TypeScript converter and the interface you document becomes the interface you compile.