Live Markdown editor with side-by-side preview; GFM tables, code highlight, task lists.

Switch tool

Markdown0 chars · 0 lines

Preview0 HTML chars

How to use

Purpose

Live Markdown preview and editor. Type Markdown on the left, see HTML render on the right. Supports GitHub Flavored Markdown (GFM) extensions, tables, task lists, strikethrough, Mermaid diagrams, KaTeX math, code syntax highlighting, footnotes, and emoji shortcodes. Everything renders locally. Ideal for technical docs, READMEs, blog drafts, and knowledge bases. Export to HTML, PDF, or plain text for pasting into Notion, Feishu, WeChat Official Accounts, etc.

Steps

Type Markdown in the left editor or drop a .md / .markdown file
Right pane renders HTML in real time with synchronized scrolling
Code blocks get language-aware syntax highlighting (100+ languages)
GFM extensions (tables, task lists, strikethrough, blockquotes) render directly
Mermaid diagrams: wrap in ```mermaid blocks for flowcharts, sequences, Gantt, etc.
Math: inline $E=mc^2$ or block $$ ... $$ via KaTeX
Export to HTML / PDF / plain text; HTML includes inline styles for direct email or paste
Three themes: light, dark, reading-friendly

FAQ

Can I paste rendered Markdown directly into WeChat Official Accounts?: Yes. Export HTML with "inline styles" checked — all CSS is inlined to element style attributes. Copy the HTML source and paste as code into the WeChat editor. Note WeChat strips some tags and classes, so test before publishing.
Mermaid diagram fails with a syntax error, what now?: Check the mermaid block syntax: starts with graph TD or LR, follows official node/edge conventions. The tool supports Mermaid 10.x: flowchart, sequence, gantt, state, ER, journey, pie.
How do I write math? Does it support all of LaTeX?: KaTeX renders ~90% of common LaTeX math (integrals, sums, matrices, Greek, sub/superscripts). Environments like align, cases, matrix work. Some LaTeX packages (mhchem chemistry) need extra config — check the KaTeX support page.
Can I publish to a blog from here?: The tool only renders and exports; no direct platform integration. Exported HTML / Markdown pastes into Hexo, Hugo, VitePress, Jekyll, Astro static blogs, or Markdown-supporting communities like Dev.to, Hashnode, Medium (with import).
What languages does code highlighting support?: Based on highlight.js: 100+ languages. Common ones (js, ts, jsx, tsx, py, go, rust, java, kotlin, swift, php, ruby, c, cpp, cs, sql, yaml, json, bash, dockerfile) all work. Specify with ```python or ```typescript.

Use cases

Writing GitHub READMEs: preview while typing avoids broken tables or missing code highlighting on push
Drafting technical blogs: polish here, paste into Hexo/Hugo/Dev.to/Hashnode
Exporting for WeChat: Markdown is faster than the WeChat editor; export inline HTML and paste
Drawing Mermaid diagrams: skip separate diagram tools; write architecture diagrams in Markdown
Maintaining knowledge bases: Notion/Feishu/Yuque all paste Markdown well; edit locally then bulk paste

Use cases

Writing READMEs, blog drafts, technical docs, knowledge base notes, and WeChat articles. Developers, technical writers, bloggers, and content marketers use it daily. Full GFM extension support, Mermaid diagrams, KaTeX math, and inline HTML export are the differentiators.