Markdown Editor & Live Preview

How to use the markdown editor

Live-preview GitHub-flavored markdown as you type — same renderer used in GitHub, GitLab, and most static-site generators. Useful for drafting README files, blog posts, PR descriptions, and documentation. Edits stay in the browser; nothing uploads.

• 1. Type or paste markdown into the left pane. The right pane updates live, character-by-character.
• 2. Use GFM extras: tables (|--|--|), task lists (- [x]), strikethrough (~~text~~), fenced code blocks with language hints (```js), autolinking of bare URLs.
• 3. Toggle "math mode" for LaTeX-style equations rendered with KaTeX ($E = mc^2$) — useful for tech blog posts.
• 4. Insert images by dragging onto the editor — they're Base64-encoded into the markdown source, viewable in any preview without external hosting.
• 5. Export options: download as .md, copy raw markdown, copy rendered HTML, or print to PDF.

Common mistakes to avoid

• Mixing tabs and spaces in code blocks. Most renderers handle either, but the offside rule for nested lists is space-sensitive. Pick one and stick to it.
• Forgetting blank lines around code blocks and lists. Without them, markdown often merges blocks. Insert a blank line before and after every fenced block, list, and heading.
• Using **bold** and __bold__ inconsistently. They're equivalent in GFM but some older renderers (Reddit) only support one. Pick one for portability.
• Hard-wrapping text at 80 chars manually. GFM treats single newlines as soft breaks; double newlines as paragraphs. Many editors render hard wraps as ugly mid-sentence breaks. Let it flow.
• Inline HTML in markdown. Most renderers allow it, but linters and platforms (npm, PyPI) often strip it. Use markdown syntax where possible; HTML only for tables that need spans/styling.
• Linking with relative paths in a README that gets reposted. If your README is shown on PyPI, npm, GitHub, and your blog, relative links break in 3 of 4 places. Use absolute URLs.