Markdown editor
Notes, recipes and notices that look right before you share them.
PrivateNo uploadsRuns in your browserNew to Markdown? Take the twenty-minute course. The cheat sheet below the editor inserts any element at the cursor.
Markdown
Paste, type, drop a file, open a URL or press Sample
Preview
The page renders here as you type
Markdown cheat sheet
The original 2004 syntax. Every Markdown app renders these.
Heading
# Heading 1 ## Heading 2 ### Heading 3Heading 1
Heading 2
Heading 3
Put a space after the # and a blank line before and after the heading. Up to six levels.
Alternate heading
Heading 1 ========= Heading 2 ---------Heading 1
Heading 2
Any number of = or - under the text; only levels 1 and 2.
Bold
**bold text**bold text
Use asterisks inside a word: Love**is**bold.
Italic
*italic text*italic text
Inside a word use asterisks, not underscores: A*cat*meow.
Bold and italic
***really important***really important
Blockquote
> A quote. > > Second paragraph, nested: >> Deeper.A quote.
Second paragraph, nested:
Deeper.
Blank lines before and after. Headings, lists and code work inside.
Ordered list
1. First item 2. Second item 3. Third item- First item
- Second item
- Third item
Numbers need not be in order; the first one sets the start.
Unordered list
- First item - Second item - Nested item- First item
- Second item
- Nested item
Use one marker (-, * or +) per list. Indent two spaces to nest.
Code
Run `npm install` first.Run
npm installfirst.Backticks inside code: ``a `literal` backtick``.
Code block
indented four spaces is a code blockindented four spaces is a code blockHorizontal rule
---Blank lines around it, or it becomes a heading.
Link
[sdev tools](https://www.sdev.in/tools "Browser tools")The title in quotes is optional. Replace spaces in a URL with %20.
Autolink
<https://www.sdev.in>Image
Wrap it in a link to make it clickable: [](https://…).
Line break
Two spaces at the end break the line.<br>So does the br tag.Two spaces at the end
break the line.
So does the br tag.Trailing spaces are easy to miss; <br> is the visible option. A backslash at the end works in CommonMark.
Escaping
\* Not a bullet 1968\. Not a list \# Not a heading* Not a bullet
1968. Not a list
# Not a heading
A backslash shows the next punctuation mark literally.
For quick notes
Plain text that looks polished.
Morning notes. Arul drafts the team update with simple marks.
BeforeNotes that look like a mess
With sdevClean notes as you type
Shared in the call
It reads clean for everyone.
All clear
No one asks what he meant.
How to write Markdown
Mark up plain text
A # starts a heading, - a bullet, > a quote, ** wraps bold. The cheat sheet below has every element with its rendered result; Insert drops one at the cursor. New to Markdown? The Learn tab is a twenty-minute course.
Watch the preview
The right pane renders as you type, with an outline, word count and reading time. Tables, task lists, footnotes, definition lists and emoji shortcodes all render.
Export or switch
Download the .md file, or the rendered page as HTML, text or PDF; Ctrl+S saves the .md. Switch to Visual to keep writing with a toolbar; it is the same document.
Good to know
- Space after the # in headings, blank lines around headings, lists, quotes, rules and code blocks. Processors disagree when they touch.
- Emphasis inside a word needs asterisks: Love**is**bold. Underscores in the middle of a word are left alone by many processors.
- Do not indent paragraphs. Four spaces or a tab at the start of a line is a code block.
- One bullet character per list. Switching between -, * and + mid-list starts a new list in some processors.
- A line that starts with a number and a period becomes a list. Write 1968\. to keep it as text.
- Spaces in a URL break the link: use %20, or put the whole URL in angle brackets.
- Only attribute-less inline tags such as <br>, <sub>, <kbd> and <ins> pass through here. For centred or coloured text, image sizes and link targets, switch to the HTML tab.
- Markdown inside HTML blocks is not processed. Keep the two on separate lines with a blank line between.
- Editor shortcuts: Ctrl+F finds and replaces, Ctrl+D selects the next match, Alt+Up or Down moves a line, Tab indents the selection.
- Your draft is saved in this browser and restored the next time you open any of the editor tabs. Press Clear to forget it. Nothing is sent to a server.
Where people use it
Write a README
Write the project README and see headings, lists and code the way readers will.
Open a .md file
Someone sent you a .md file? Open it and read it as a neat page.
Notes with tasks
Keep notes with check lists, tables and footnotes.
Turn notes into a web page
Copy the HTML or download it as an .html file.
Look up the syntax
Forgot how to make a table or a link? Check the cheat sheet.
Markdown cheat sheet
Why this one
Markdown, HTML and a visual toolbar share one document, so you can start in Markdown and finish with buttons.
- Live preview with tables, task lists, footnotes and code.
- Download as .md, .html, text or PDF.
- Your notes stay on your device.
What you can change
- Split or full layout
- Preview width
- Wrap lines
People find this page by searching
- markdown editor
- markdown preview online
- markdown viewer
- markdown to html
- readme editor
- markdown table preview
- md file viewer
- open md file online
Cite this tool
- APA
sdev.in. (n.d.). Markdown editor and preview [Web tool]. https://www.sdev.in/tools/markdown-preview
- MLA
"Markdown editor and preview." sdev.in, https://www.sdev.in/tools/markdown-preview.
- Chicago
sdev.in. "Markdown editor and preview." https://www.sdev.in/tools/markdown-preview.
- BibTeX
@misc{sdev-markdown-preview, title = {Markdown editor and preview}, author = {{sdev.in}}, howpublished = {\url{https://www.sdev.in/tools/markdown-preview}}, note = {Web tool} }
Questions people ask
What is Markdown?
A way to format plain text with a few punctuation marks: # for a heading, ** for bold, - for a bullet. A processor turns it into HTML. It was made in 2004 so the plain text stays easy to read as it is. It is used for notes, documentation, forums and chat apps.
Which Markdown syntax does this editor render?
The basic syntax plus the common extensions: tables with alignment, fenced code with a language, task lists, strikethrough, footnotes, definition lists, custom heading ids, reference-style links, highlight, subscript, superscript and emoji shortcodes. That covers the Markdown most apps write. Attribute-less inline HTML tags such as br, sub, sup, kbd and ins pass through; other HTML shows as text.
How do I make a line break without starting a new paragraph?
End the line with two spaces, a backslash or a <br> tag. A blank line starts a new paragraph; a single newline on its own is joined into the same paragraph.
How do I show a literal *, # or other mark?
Put a backslash in front of it: \* shows an asterisk, and 1968\. keeps a year from becoming a numbered list. Inside backticks nothing is processed, so `*text*` shows the asterisks as code.
Why does my table or list not render?
Tables need a row of dashes under the header, with a pipe between columns. Lists need a space after the dash or number, and a blank line before them when they follow a paragraph. Indenting a line by four spaces makes it a code block, so keep paragraphs flush left.
Where do I learn Markdown from scratch?
The Learn tab above: ten short lessons with exercises checked as you type, a quiz and the cheat sheet. About twenty minutes.
Will switching to Markdown lose anything?
The head of a full page, its styles and scripts, are kept aside and put back when you return to HTML or Visual. Only the body is turned into Markdown, and Markdown cannot express everything HTML can, so custom attributes, colours and inline styles in the body are dropped.
Which download formats are there?
HTML (.html), Markdown (.md), plain text (.txt) and PDF. PDF opens the page in a new tab with the print dialog, where you choose Save as PDF. Fragments without html and body tags are wrapped in a simple styled page for the HTML and PDF downloads.
Is my document uploaded anywhere?
No. Editing, converting, checking and the preview run in your browser. The draft is kept in this browser's local storage so it is still here when you come back on the same device.