Skip to main content
ilovecalcs logoilovecalcs.

Developer Tools · Live

Markdown Live Editor, write and preview HTML in real-time.

Write Markdown in the left pane and see it rendered instantly on the right. Toggle to Raw HTML view to copy the generated markup. Supports CommonMark headings, lists, tables, code blocks, blockquotes, and GFM strikethrough. 100% client-side.

Markdown guideReal-time
Markdown Editor
Inputmarkdown

Welcome to Markdown Live Editor

Write Markdown on the left and see the live preview instantly.

Text Formatting

Bold, italic, bold and italic, strikethrough, and inline code.

Lists

  • Unordered item one
  • Unordered item two
  • Unordered item three
  1. First ordered item
  2. Second ordered item
  3. Third ordered item

Blockquote

"Simplicity is the ultimate sophistication." — Leonardo da Vinci

Code Block

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("World"));

Table

NameRoleStatus
AliceDeveloperActive
BobDesignerActive
CharlieManagerAway

Visit ilovecalcs.com

Edit this document to start writing your own Markdown!

Words:126
Characters:846
Lines:48
HTML size:2072 chars

Quick reference

Markdown syntax cheat sheet

Headings

  • # H1Heading level 1
  • ## H2Heading level 2
  • ### H3Heading level 3
  • #### H4Heading level 4

Emphasis

  • **bold**Bold text
  • *italic*Italic text
  • ***both***Bold + italic
  • ~~del~~Strikethrough (GFM)

Lists

  • - itemUnordered list item
  • * itemUnordered (alt)
  • 1. itemOrdered list item
  • - subNested list (2-space indent)

Code

  • `code`Inline code
  • ```langFenced code block
  • codeIndented code block (4 spaces)

Links & Images

  • [text](url)Inline link
  • ![alt](url)Image
  • <url>Auto-link

Blocks

  • > quoteBlockquote
  • ---Horizontal rule
  • | c | c |GFM table column
  • :---:Center-align column

Markdown guide

What Markdown is, how it works, and why developers use it.

Markdown was created by John Gruber in 2004 with a single goal: to be as readable as possible in its raw, unrendered form. Unlike HTML, which is verbose and hard to read as plain text, a Markdown document looks like a well-formatted email — it just happens to convert cleanly to HTML.

From plain text to HTML

A Markdown parser works in two phases. First, it identifies block-level elements: paragraphs, headings (ATX # or setext underline style), lists (ordered and unordered), code blocks (fenced or indented), blockquotes, horizontal rules, and tables. Second, within those blocks it applies inline formatting: bold, italic, strikethrough, inline code, links, and images.

This two-pass structure means that inline formatting does not "leak" across block boundaries — bold text in one list item does not accidentally bold the next item.

Headings

ATX headings use one to six # characters followed by a space. Setext headings use === underlines for H1 and --- underlines for H2, placed on the line immediately after the heading text. Both styles are equivalent; ATX is more widely supported and the recommended choice for new documents.

Emphasis and strong emphasis

Wrapping text in a single * or _ produces italic (<em>). Wrapping in double produces bold (<strong>). Triple produces both. The rules for when _ can open or close an emphasis span (surrounding characters, word boundaries) are notably complex in the CommonMark spec — when in doubt, use * instead of _, as it behaves more predictably in mid-word contexts.

Lists and nesting

Unordered lists start with -, *, or + followed by a space. Ordered lists start with any number followed by a period or parenthesis. Items can be nested by indenting with at least two spaces or one tab. Mixed list types (an ordered list inside an unordered list, or vice versa) are valid and widely supported.

Code blocks and syntax highlighting

Fenced code blocks (GFM) use triple backticks or triple tildes, with an optional language identifier on the opening line: ```javascript. The identifier becomes the class="language-javascript" attribute on the <code> element, which syntax-highlighting libraries like Prism.js, highlight.js, and Shiki use to apply colors. Inline code uses single backticks; its content is rendered verbatim with no Markdown processing.

GFM tables

The GitHub Flavored Markdown pipe table format is the de facto standard for structured data in Markdown documents. The header row and separator row are required; the separator row controls alignment with leading/trailing colons. Column widths in the source have no effect on rendering — padding is purely cosmetic for readability.

| Left | Center | Right | | :--- | :----: | ----: | | A | B | C |

Links and images

Inline links use [text](url) or [text](url "title"). Reference links define the URL separately: [text][id] and then [id]: url anywhere in the document. Images use the same syntax with a leading !: ![alt text](image.png). Auto-links (bare URLs in angle brackets <https://example.com>) are rendered as clickable links in most processors.

Where Markdown is used

Markdown (and GFM specifically) is the native language of: GitHub and GitLab READMEs, issues, and pull request descriptions; Stack Overflow and Stack Exchange questions and answers; Reddit posts; Discord and Slack messages; Notion, Obsidian, and Bear notes; Hugo, Jekyll, and Gatsby static sites; Jupyter notebooks; and countless documentation platforms including Read the Docs and Docusaurus. Understanding Markdown is an essential skill for any developer.