coderef

Markdown Editor

A Markdown editor with live preview, and a cheat sheet of every element — basic and extended syntax — with the rendered result next to the source.
How to useShow guide ▾

1. What Markdown is

Plain text with light symbols for formatting — **bold**, # Heading, - list — that converts to HTML. It's used for READMEs, docs, notes, issues and chat.

2. Write

  • Type on the left; the preview updates as you type.
  • Toolbar or shortcuts: Ctrl/⌘+B bold, Ctrl/⌘+I italic, Ctrl/⌘+K link. Select text first to format it.
  • Switch between Edit, Split and Preview views.

3. Save & export

  • Your document autosaves in this browser — nothing is uploaded.
  • File menu: open a .md file, download as .md or a styled .html page, or copy the Markdown or HTML.

4. Learn the syntax

The cheat sheet below shows each element's Markdown and its result. Try it inserts the example at your cursor. Raw HTML is allowed, but anything script-like is removed from the preview.

File ▾

Loading preview…

147 words950 characters41 lines~1 min readSaved in this browser

Markdown cheat sheet

Basic syntax works in virtually every Markdown app; extended syntax is supported by GitHub and most modern editors, but not everywhere. Press Try it to drop an example into the editor.

  • Heading

    One # per level, up to six. Put a space after the #.

    # H1
## H2
### H3

    H1

    H2

    H3

  • Bold

    __text__ also works, but ** is safer mid-word.

    **bold text**

    bold text

  • Italic

    _text_ also works.

    *italicized text*

    italicized text

  • Bold & italic

    ***really important***

    really important

  • Blockquote

    > Quoted text
>
> > Nested quote

    Quoted text

    Nested quote

  • Ordered list

    The numbers don't have to be in order — the first one sets the start.

    1. First item
2. Second item
3. Third item
    1. First item
    2. Second item
    3. Third item

  • Unordered list

    -, * or + — just don't mix them in one list.

    - First item
- Second item
- Third item
    • First item
    • Second item
    • Third item

  • Nested list

    Indent nested items to line up with the parent's text.

    1. Prepare
   - Gather tools
   - Read the docs
2. Build
    1. Prepare
      • Gather tools
      • Read the docs
    2. Build

  • Inline code

    Use double backticks to include a backtick: `` `x` ``.

    Run `npm install` first.

    Run npm install first.

  • Horizontal rule

    Leave a blank line before ---, or it turns the line above into a heading.

    Above

---

Below

    Above

    Below

  • Link

    [Markdown Guide](https://www.markdownguide.org "Optional title")

    Markdown Guide

  • Reference link

    Read the [CommonMark spec][spec].

[spec]: https://spec.commonmark.org/

    Read the CommonMark spec.

  • Image

    Like a link, with a ! in front; the text in [ ] is the alt text.

    ![coderef logo](/logo-small.png)

    coderef logo

  • Line break

    End a line with two spaces, a backslash, or <br> for a break within a paragraph.

    First line<br>
Second line

    First line
    Second line

  • Paragraphs

    Separate paragraphs with a blank line.

    First paragraph.

Second paragraph.

    First paragraph.

    Second paragraph.

  • Escaping characters

    A backslash shows a character that would otherwise be formatting.

    \*not italic\* and 1\. not a list

    *not italic* and 1. not a list

References: CommonMark spec · GitHub Flavored Markdown · Markdown Guide. Rendering by markdown-it; preview sanitized with DOMPurify.