Markdown Online Preview Guide: GFM, Mermaid, Math, and Privacy

Online preview is about checking the result, not merely reading text

Any text editor can open Markdown source, but valid-looking source does not guarantee the rendered document is correct. A missing table delimiter, an unclosed code fence, a skipped heading level, or invalid Mermaid syntax may only become obvious after rendering.

The online Markdown viewer puts source editing, live preview, and a table of contents on the same page. It provides a fast first review before a commit. It does not replace the final build on GitHub, a documentation platform, or a static-site generator, each of which can apply its own extensions and URL context.

Start with the compatibility level you need

Standard Markdown

Headings, paragraphs, emphasis, blockquotes, lists, links, images, and fenced code blocks form the common foundation. Parsers can still differ in their tolerance of blank lines, indentation, and deeply nested lists. Prefer explicit, uncomplicated markup instead of relying on formatting that works only because one parser is forgiving.

GitHub Flavored Markdown (GFM)

Development documentation and READMEs commonly rely on GFM features:

• tables, task lists, and strikethrough;
• automatic links for URLs;
• fenced code blocks with language identifiers;
• list and line-break behavior familiar to GitHub users.

Supporting GFM does not mean reproducing every GitHub behavior. Repository-relative links, issue references, user mentions, badge images, and allowed HTML still depend on platform context.

Preview GFM tables and task lists

A table needs a header and delimiter row:

| Status | Item |
| --- | --- |
| Done | Check heading levels |
| Next | Verify narrow-screen tables |

- [x] Check links
- [ ] Add image alternative text

During preview, check whether columns line up, whether long values force excessive horizontal scrolling on a narrow screen, and whether task items were accidentally parsed as an ordinary list. A long, six-column table may be clearer as several short lists on mobile.

Code blocks, highlighting, and copying

The language identifier after an opening fence selects highlighting, such as typescript, python, or json. An unknown identifier usually falls back to plain text rather than damaging the code. The sample must remain understandable without color because syntax color alone should not carry meaning.

A live preview is useful for catching unclosed fences, indentation parsed as code by mistake, and long lines that overflow. It cannot establish whether the program itself is correct; use the relevant compiler, tests, or runtime for that.

Preview Mermaid diagrams

Place diagram source in a fenced block identified as mermaid:

```mermaid
flowchart LR
  Draft --> Preview
  Preview --> Review
  Review --> Publish
```

Mermaid is an extension, not part of the core Markdown specification. If the publishing platform does not support it, retain the diagram source and provide a static image fallback. The viewer uses Mermaid's strict security mode, but you should still avoid copying complex diagrams or links from an untrusted source without review.

KaTeX math and other extensions

Inline math is commonly enclosed by $, while paired $$ delimiters mark display math. KaTeX understands many practical LaTeX commands but is not a complete TeX engine. A formula that depends on a specialized package may not render.

Footnotes, GitHub Alerts, and emoji are also extensions. A successful preview confirms that the current reader supports them; it does not prove that every package registry, Git host, or documentation system will.

Privacy differs for local files, raw URLs, and share links

These input methods have different network boundaries:

1. Local file or pasted text: this site's viewer reads and renders it in the current browser.
2. Raw URL: the browser has to request the remote address you provide, so that host receives a normal network request.
3. Share link: the document is encoded after the URL's # fragment. Browsers do not send that fragment to this site's server as part of the HTTP request, but the full link may still be retained in browser history, a clipboard, messaging software, or by its recipients.

Do not distribute credentials, access tokens, customer data, or private source through a share link. When using another online viewer, verify its implementation and privacy policy separately rather than assuming it behaves like this one.

What to inspect before exporting HTML or PDF

• Heading levels form a meaningful hierarchy instead of using size as structure.
• Link text describes its destination, and images have alternative text.
• Tables and code blocks remain readable at print width.
• External images will still be available in the document's intended environment.
• Raw HTML is either disabled or sanitized with an appropriate policy.

The viewer can export sanitized HTML or open the browser's print interface for PDF output. Those formats are useful snapshots, but keep the .md source as the maintainable version when the documentation is generated or regularly updated.

A reliable pre-publication workflow

1. Finish the source in your editor and run available spelling, link, or documentation build checks.
2. Use live preview to inspect GFM, code, formulas, and Mermaid.
3. Resize to a narrow viewport and look for overflowing tables, URLs, and code.
4. Review relative images, heading anchors, and platform-specific syntax on the final destination.
5. Remove credentials and non-public information before committing or sharing.

For a repository front page, continue with the README online preview checklist. If you have an unfamiliar file and only need to view it, start with how to open an .md file.