Write Markdown on the left and see it formatted on the right as you type. It follows GitHub-flavoured Markdown, copies clean HTML, runs in your browser and uploads nothing.
Miso's care notes
Miso is a British Shorthair who is very particular about dinner. Read more at thecodingkitty.com.
Daily checklist
- Breakfast at 08:00
- Brush the coat
- Dinner at 18:00
-
BathCats clean themselves
Meals
| Time | Food | Grams |
|---|---|---|
| 08:00 | Salmon | 40 |
| 18:00 | Chicken | 45 |
Feeder script
const meals = ["08:00", "18:00"];
meals.forEach((time) => console.log(`Feed Miso at ${time}`));
A fed cat is a quiet cat.
Press Copy HTML to take this as HTML.1
Footnotes
-
Or Download .md to save the Markdown as a file. ↩
The preview updates as you type. Your draft is saved in this browser only, and nothing here is uploaded.
Type in the Markdown box and the Preview updates as you go. On a phone, switch between the two with the Edit and Preview tabs; on a wider screen they sit side by side and scroll together, so the part you are editing stays in view on both sides. Copy Markdown and Copy HTML put either version on the clipboard, and Download .md saves the Markdown as a file named after its first heading. Your draft is kept in this browser, so a refresh does not lose it. Clear deletes it, after asking first.
Markdown syntax at a glance
| To get | Write |
|---|---|
| Heading (levels 1 to 6) | # Title, ## Section, ### Subsection |
| Bold | **bold** or __bold__ |
| Italic | *italic* or _italic_ |
| Strikethrough | ~~gone~~ |
| Link | [text](https://example.com) |
| Image |  |
| Bulleted list | - item or * item |
| Numbered list | 1. item |
| Task list | - [ ] to do and - [x] done |
| Quote | > quoted text |
| Inline code | `code` |
| Code block | three backticks, a language name, then the code, then three backticks |
| Table | rows of | cell | cell | with a |---|---| line under the header |
| Horizontal rule | --- on its own line |
| Footnote | text[^1] and, anywhere below, [^1]: the note |
| Line break | end the line with two spaces or a \ |
In a table, colons in the line under the header set the alignment: :--- for
left, :---: for centre and ---: for right. The cells do not have to line up
in the Markdown; the preview lines them up for you.
Markdown to HTML
Copy HTML gives you the HTML the preview is built from, without the preview's
extras: no highlighting colours, no styles, no classes beyond the ones that say
what something is, such as language-js on a code block and task-list-item
on a checklist item. It pastes into a blog, a CMS or an email template and takes
on that page's styles.
A few things are worth knowing about the output:
- Headings get ids, so
## Install itbecomes anh2with the iduser-content-install-it, and a link written as[install](#install-it)points at it. Theuser-content-prefix is what GitHub uses, and it stops an id from your text clashing with one on the page you paste into. - Task list checkboxes are disabled, as on GitHub. They show the state you wrote; they are not a form.
- Footnotes move to the end, in a section of their own with links there and back.
- Code blocks are not highlighted in the copied HTML. The preview colours them; the copy keeps them plain, marked with their language, so you can use whichever highlighter your site already has.
Is it safe to paste untrusted Markdown?
Yes. Markdown allows raw HTML, which is how someone could slip a script into a README or a comment, so everything goes through the same allow-list GitHub uses before it reaches the preview or the clipboard:
scripttags are removed along with their contents.- Event attributes such as
onclick,onerrorandonloadare removed from every element. - Links and images keep only
http,https,mailtoand similar addresses. Ajavascript:ordata:address loses its link, however it is spelled or encoded. iframe,form,style,object,embedandsvgare removed, and so arestyleattributes, which could otherwise cover the page with a fake form.- Ids and names get the
user-content-prefix, so an element in your text cannot take over a name the page's own code relies on.
What is left is text formatting: the safe HTML tags GitHub allows, such as
details, summary, kbd, sub and sup, alongside everything Markdown
itself produces.
Common Markdown mistakes
- A single line break does nothing. Lines in a paragraph run together. End a line with two spaces or a backslash to break it, or leave a blank line for a new paragraph.
- Some Markdown tools need a blank line before a list that follows a paragraph. GitHub-flavoured Markdown does not, but adding one keeps the file portable.
- Nested lists need indenting to the text of the item above, usually two
spaces after
-or three after1., not one. - An underscore inside a word stays an underscore.
snake_case_nameis not italic in GitHub-flavoured Markdown, but*inside a word does make italics. - A table needs its divider line. Without the
|---|row under the header it is just text with pipes in it. #Headingwith no space is not a heading. The space after the#is required.
Related
- JSON Formatter and Validator, for the JSON examples you put in a README.
- SQL Formatter, to tidy a query before you
paste it into a fenced
sqlblock. - Word Counter, for the length and reading time of what you have written.
- The HTML cheat sheet, for the tags Copy HTML produces, and the Git cheat sheet, for committing the README once it reads right.
- Bubble sort, visualised: the kind of step-by-step explanation Markdown tables and code blocks are good for.
Common questions
Is this online Markdown editor free, and is my text uploaded?
It is free with no sign-up, and nothing you write is uploaded. The Markdown is turned into HTML in your browser, and the draft is saved in your browser's local storage so a refresh does not lose it. The site records that the editor was used and how long the text was, never the text itself.
How do I convert Markdown to HTML?
Write or paste the Markdown into the editor at the top of this page, check the preview, then press Copy HTML. You get clean HTML with no styles or scripts in it: headings, paragraphs, lists, tables, links and code blocks marked with their language, ready to paste into a web page, a CMS or an email template.
Which Markdown does the preview follow?
GitHub-flavoured Markdown, the version used in README files, issues and pull requests on GitHub. On top of standard CommonMark it adds tables, task lists with checkboxes, strikethrough with two tildes, footnotes, and bare URLs that turn into links. Fenced code blocks with a language name are highlighted.
Can I use HTML inside the Markdown?
Yes, the same safe subset GitHub allows: details and summary for a collapsible section, kbd for keys, sub and sup, line breaks, images and links. Anything that could run code is removed, both in the preview and in the copied HTML: script tags, onclick and other event attributes, style attributes, iframes, forms and javascript: links.
How do I preview a README.md before pushing it?
Paste the README into the editor and the preview shows it close to how GitHub will, tables, task lists and code blocks included. Press Download .md to save the edited file, named after its first heading. Relative image paths in the README only show once the file is on GitHub, since the images live in your repository.
Will I lose my draft if I close the tab?
No, as long as you come back in the same browser. The draft is saved in local storage as you type and comes back when you reopen this page. It stays on that device only, and a private window or clearing site data removes it. Clear empties the editor and deletes the saved copy, after asking you to confirm.
Why is my line break not showing in the preview?
In Markdown a single line break inside a paragraph is treated as a space, so the lines join up. To break the line without starting a new paragraph, end it with two spaces or a backslash. To start a new paragraph, leave a blank line. GitHub comments are the exception people remember, because they keep single line breaks.