What the Markdown tools do
Three things in one page: a live preview that renders Markdown as you type, a convert to HTML mode that outputs the markup for pasting into a CMS, email or static site, and a table generator that builds the pipe-and-dash syntax for a table of any size — the one part of Markdown nobody enjoys typing by hand. Rendering happens in your browser; drafts are never uploaded.
Markdown syntax reference
| Element | Markdown | Renders as |
|---|---|---|
| Heading | # H1 ## H2 ### H3 | <h1> … <h3> |
| Bold / italic | **bold** *italic* | <strong> / <em> |
| Link | [text](https://example.com) | <a href> |
| Image |  | <img> |
| Inline code | `code` | <code> |
| Code block | ```js … ``` | <pre><code> |
| Bullet list | - item | <ul><li> |
| Numbered list | 1. item | <ol><li> |
| Blockquote | > quote | <blockquote> |
| Horizontal rule | --- | <hr> |
| Table | | a | b |\n|---|---| | <table> |
| Task list | - [ ] todo - [x] done | checkbox (GitHub flavour) |
Tables, done properly
| Name | Role | Since |
|:---------|:---------:|------:|
| Ana | Engineer | 2021 |
| Kit | Designer | 2023 |
:--- left-aligned :---: centred ---: right-alignedThe generator produces this layout for the row and column count you choose, with alignment markers, so you only fill in the cells. Columns do not have to line up visually for the table to render — the padding is cosmetic — but aligned source is easier to edit later.
Flavours of Markdown
- CommonMark — the formal specification most renderers follow for the basics.
- GitHub Flavored Markdown (GFM) — CommonMark plus tables, task lists, strikethrough (
~~text~~), autolinked URLs and fenced code with language tags. This tool renders GFM, which is what README files, issues, Notion, Obsidian and most chat tools expect. - Others — MultiMarkdown, Pandoc and Markdown Extra add footnotes, definition lists and attributes. Those extensions will show as plain text here.
Common pitfalls
- A list needs a blank line before it, or it is treated as part of the previous paragraph.
- Two spaces at the end of a line force a line break; a single newline is ignored inside a paragraph.
- Nested lists need consistent indentation — usually two or four spaces, matching the parent's marker width.
- Underscores inside words (
snake_case_name) can trigger italics in some renderers; use backticks or asterisks to be safe. - HTML is allowed inline, but Markdown inside a block-level HTML tag is not processed.
- Pipes inside a table cell must be escaped as
\|.
Converting to HTML
The HTML output is plain, unstyled markup — headings, paragraphs, lists, tables — with no wrapper, classes or inline CSS. That is deliberate: it drops into any page and takes the page's styles. Code blocks carry a language-xxx class on the <code> element so a highlighter such as Prism or highlight.js can colour them. If you need email-safe HTML with inline styles, run the output through an inliner.