Markdown Mastery: Write, Convert & Preview
- Learn Markdown syntax, convert between Markdown and HTML, generate tables, and preview formatted output.
- What Is Markdown?.
- Covers basic syntax.
- Covers extended syntax.
- Covers tables.
What Is Markdown?
Markdown is a lightweight markup language using plain text formatting that converts to HTML. A hash becomes a heading, asterisks become bold. The syntax is readable even without rendering.
Markdown is everywhere: GitHub READMEs, docs sites, blogs, Slack, Jupyter notebooks, static site generators. One of the highest-leverage skills for developers.
Basic Syntax
Headings: # for H1, ## for H2, ### for H3. Emphasis: *italic*, **bold**, ***bold italic***. Lists: - or * for unordered, numbers for ordered.
-webkit-backdrop-filter alongside backdrop-filter for Safari support. Without the prefix, the effect is invisible to roughly 25% of mobile users.Always include a space after hash symbols. Indent with two or four spaces for nested lists.
Extended Syntax
Block quotes use > prefix. Horizontal rules use --- on a line alone. Task lists use - [ ] for unchecked, - [x] for checked.
backdrop-filter inside a position: fixed element can cause severe scroll performance issues. Test thoroughly on real iOS devices.These render as interactive checkboxes on GitHub — perfect for to-do lists and progress tracking.
Tables
Tables use pipes and hyphens. First row is header, separated by hyphens. Columns delimited by pipes. Alignment via colons in separator.
The Markdown Table Generator creates properly formatted tables from a visual grid — much easier than writing by hand.
Code Blocks & Syntax Highlighting
Inline code uses backticks. Code blocks use triple backticks with language identifier for syntax highlighting.
Supported languages vary but most renderers handle javascript, python, css, html, json, bash, and many more.
Links & Images
Links: [text](url). Images: . Reference-style links define URLs elsewhere for cleaner source.
Alt text on images is critical for accessibility. Use relative paths for portable documentation.
Converting Markdown ↔ HTML
Markdown to HTML: the fundamental operation. The Markdown to HTML tool shows generated HTML for embedding in non-Markdown sites.
HTML to Markdown: valuable for CMS migration. The HTML to Markdown tool handles paragraphs, headings, lists, links, and code blocks.
Common Use Cases
Documentation in version-controlled repos. Static site blogging with Next.js, Hugo, Gatsby. Note-taking with Obsidian, Notion.
Write in whichever format is natural, convert when needed. The tools handle both directions.
Best Practices
Use ATX-style headings (# Heading), not Setext. Leave blank lines around headings, code blocks, and lists.
Keep source lines under 80-120 characters. Use soft wraps rather than hard wraps within paragraphs.
Write Markdown with instant formatted output. See headings, lists, and tables rendered in real time.
⚡ Open Markdown Preview