How to Preview Markdown and Compare GitHub, Qiita and Zenn Styles

1. Understand the difference between previews and published pages

Markdown uses text markers such as # for headings, ** for bold, and fenced blocks for code. A preview lets you inspect the formatted headings, tables and code while working on the source.

Markdown Preview Lab uses its own renderer and offers typography inspired by GitHub, Qiita and Zenn. It does not run those services' official renderers, so some layout details and platform-specific extensions can look different.

2. Enter Markdown or load an existing .md file

Open Markdown Preview Lab. On the first visit it shows a sample; choose New document before changing the untouched sample to start blank. If a local draft exists, the app restores that instead.

On desktop, type Markdown on the left. You can also select or drag and drop a .md or text file. Try # Title, ## Section and - Item to see the preview update on the right.

On phones, switch between Edit, Preview and Compare instead of keeping all desktop panes on screen.

3. Switch among GitHub-, Qiita- and Zenn-inspired styles

Choose GitHub, Qiita or Zenn from Preview A's style menu. Switching styles with the same source helps you compare headings, spacing and tables. Standard, Minimal, Print and Custom CSS styles are also available.

Use the GitHub-inspired view for a README or the Qiita-inspired view for a Qiita draft. Neither is a live copy of a platform's renderer.

4. Compare two preview styles side by side

Change View to Compare and assign different styles to Preview A and Preview B. For example, the same Markdown can appear in GitHub- and Zenn-inspired views at once.

With Sync scroll on, the editor and both previews follow one another by relative progress through the document. Matching lines are not aligned pixel for pixel. Turn synchronization off to inspect a pane independently.

5. Review compatibility warnings before publishing

The checker displays compatibility percentages and warnings for patterns such as platform-specific blocks, math, HTML and task lists. Select a warning to jump to the corresponding Markdown line.

A Zenn-specific block such as :::message may behave differently when copied to another platform. Check it in the destination editor, or revise the syntax.

Scores are based on built-in rules, not official compatibility results. Even a high score cannot guarantee an identical result, and some differences may remain undetected.

6. Check remote images and unsupported extensions

The app does not fetch remote images referenced in Markdown. It displays placeholders to avoid network requests. Check the images and their placement in the publishing service.

Equations and platform-specific blocks may not be fully rendered here. A missing preview in this tool does not necessarily mean the destination service rejects that syntax.

7. Use formatting helpers and the larger editor

Formatting helpers insert headings, bold, italic, links, code and lists. The expand icon opens a larger editing dialog for long documents, with changes synchronized to the main editor.

Ctrl/Command+B inserts bold markup and Ctrl/Command+I inserts italic markup. Tab inserts two spaces, and Undo/Redo are available. The formatting shortcuts insert syntax rather than toggling existing markup off.

8. Export the Markdown source as .md

Enter an output filename and choose Save to download Markdown as a .md file. The extension is added if missing. Ctrl/Command+S can also save the source.

You can copy the Markdown text to the clipboard. The Save action exports the source, not an HTML or PDF rendering of Preview or Compare.

Autosave is meant for local drafts. Export .md at useful milestones so the document can be opened elsewhere.

9. Understand autosave, privacy and limitations

Drafts are autosaved to localStorage. Returning within the same browser storage context can restore them, but clearing site data, switching browser or mode, or using a local HTML copy may separate drafts. Keep important text as a .md file.

Editing, rendering, checks and file operations run inside the browser. There is no runtime CDN dependency, and the app's CSP restricts network connections. Loading the web page requires an initial request, but the app does not upload your Markdown.

Long documents may slow live preview on some devices. Check the final appearance in GitHub, Qiita or Zenn before publishing.

Tips and limitations

• Compare the two destinations you actually use instead of cycling through every style.
• Compatibility scores are prompts to review syntax, not pass/fail results.
• Export a .md backup regularly instead of relying only on autosave.
• Remote images show placeholders. Check image placement at the destination.