Markdown Editor & Preview — Write Markdown, See HTML Live

How Markdown Editor Works

Markdown → HTML: headings (# → h1-h6), bold (** → strong), italic (* → em), links ([text](url) → a), code (`code` → code), lists (-/1. → ul/ol)

Markdown is a lightweight markup language created by John Gruber in 2004 that allows you to write formatted text using a plain-text syntax. It converts to structurally valid HTML and is widely used for documentation, readme files, forums, and static site generators.

# ## ###

Headings (h1-h6) — One to six hash symbols followed by a space create heading levels h1 through h6. Each level represents a different section hierarchy.

**text**

Bold Formatting — Double asterisks around text render as <strong> HTML tags, producing bold text. Use for strong emphasis on important content.

[text](url)

Hyperlinks — Square brackets around link text followed by parentheses containing the URL render as anchor (<a>) tags with the specified href attribute.

```code```

Code Blocks — Triple backticks create fenced code blocks rendered as <pre><code> elements. Optionally specify a language after the opening backticks for syntax highlighting.

- / 1.

Lists — Hyphens create unordered (<ul>) lists while numbers followed by periods create ordered (<ol>) lists. Nested lists use indentation.

How to Use

1. Type or paste markdown text into the input field at the top of the page. The preview will update automatically as you type.
2. Use markdown syntax: # heading, **bold**, *italic*, [link](url), `code`, - list item, > blockquote, and ``` for code blocks.
3. Switch between "Preview" and "HTML Source" output formats using the dropdown menu to see either the rendered output or the raw HTML.
4. In Preview mode, see the rendered HTML with headings, formatted text, links, images, lists, blockquotes, and code blocks displayed as they would appear in a browser.
5. Copy the generated HTML from the HTML Source view or use the live preview to check your formatting before pasting into your documentation or content system.

Quick Reference

Common Uses

• •Writing README files for GitHub, GitLab, and Bitbucket repositories with formatted documentation.
• •Creating documentation for software projects, API references, and developer guides.
• •Writing forum posts and comments on platforms like Reddit, Stack Overflow, and Discourse.
• •Authoring content for static site generators like Jekyll, Hugo, Gatsby, and Next.js.
• •Formatting text in note-taking apps like Obsidian, Notion, Bear, and Joplin.

Understanding the Result

Markdown is a lightweight markup language with plain-text formatting syntax, created by John Gruber in 2004 with significant contributions from Aaron Swartz. The primary design goal was to make it possible to write formatted text using a simple, readable syntax that could be converted to HTML without requiring the user to know HTML tags. Markdown has since become one of the most widely used markup languages in the world, particularly in the software development community. It is the default formatting language on platforms like GitHub, GitLab, Stack Overflow, Reddit, and many others. The philosophy behind Markdown is that the raw text should be readable and publishable as-is, without looking like it has been marked up with formatting instructions. This means that Markdown syntax is intentionally minimal compared to HTML or other markup languages. For example, a heading is indicated by hash symbols (#) rather than angle-bracket tags. While the original Markdown specification by Gruber defined the core syntax, several extensions have emerged over time to add features like tables, footnotes, task lists, strikethrough text, and automatic URL linking. The most notable of these is CommonMark, a standardized specification that resolves ambiguities in the original Markdown. GitHub Flavored Markdown (GFM) builds on CommonMark and adds features specific to GitHub's platform, such as task lists, emoji shortcuts, and table alignment. Markdown is supported by virtually every static site generator, content management system, and documentation tool in use today, making it an essential skill for developers, technical writers, and content creators.

Worked Examples

Frequently Asked Questions

Who created Markdown and when?

Markdown was created by John Gruber in 2004, in collaboration with Aaron Swartz. Gruber wanted a formatting syntax that was easy to write and easy to read in its raw form, without looking cluttered. The original specification was published on Gruber's website, Daring Fireball, and included a Perl-based reference implementation for converting Markdown to HTML.

What is the difference between Markdown and CommonMark?

Original Markdown had several ambiguities and inconsistencies in its specification, leading to different implementations producing different HTML from the same input. CommonMark is a standardized, unambiguous specification for Markdown developed by a community of Markdown implementers and users. It defines exactly how Markdown should be parsed, eliminating the inconsistencies between implementations. Most modern Markdown parsers support CommonMark.

Can I use HTML directly inside Markdown?

Yes, you can embed raw HTML directly inside Markdown. Any HTML tags will be passed through to the output unchanged. This is useful for features not supported by Markdown syntax, such as tables, div containers, or custom styling. However, the block-level HTML elements must be separated from surrounding content by blank lines.

Does this editor support GitHub Flavored Markdown (GFM)?

This editor supports the core Markdown syntax including headings, bold, italic, links, images, code blocks, inline code, lists, blockquotes, and horizontal rules. Full GFM support (tables, task lists, strikethrough, emoji) may not be included, but the basic syntax works for most documentation needs.

How do I create a table in Markdown?

Tables use pipes (|) to separate columns and hyphens (-) to define the header row. Example: | Name | Age | City | |------|-----|------| | Alice | 30 | NYC | | Bob | 25 | LA |. Alignment is controlled by colons in the separator row: :--- for left, :---: for center, ---: for right.

Pro Tips

• →Use reference-style links for documents with many repeated URLs: define [label]: url at the bottom and reference as [text][label] throughout. This keeps the raw markdown cleaner and makes URL updates a single-point change.
• →For README files, follow the "fold principle": structure content so the most important information (what it does, how to install, basic usage) is visible without scrolling. Secondary details (advanced config, contributing guide, license) can go below the fold.
• →When writing documentation, alternate between headings (structure), paragraphs (explanation), and code blocks (examples). This rhythm helps readers scan for what they need — heading to identify the topic, code block to copy the solution, paragraph for the "why" behind the code.
• →For nested lists, indent sub-items with 4 spaces or 1 tab. Two-space indentation is not standard Markdown and may not render as nested on all platforms.
• →Always separate block-level elements (headings, paragraphs, lists, code blocks) with blank lines. Without blank lines, some Markdown parsers will merge adjacent elements, producing unexpected output.

Limitations to Know

• •This editor implements a subset of Markdown syntax and does not support all CommonMark or GFM extensions. Tables, task lists, strikethrough, emoji shortcodes, footnotes, and definition lists are not rendered. When not to use: for complex documentation requiring GFM-specific features like tables or task lists.
• •The HTML generation is a simplified parser that operates line by line. It does not handle nested inline formatting within links (e.g., [**bold link**](url)), which more sophisticated parsers like marked or markdown-it support.
• •HTML tags embedded directly in Markdown are escaped rather than passed through. This means you cannot use raw HTML for tables, divs, or custom styling within the markdown. When not to use: for documents relying on embedded HTML for layout or custom components.
• •The parser does not validate URL safety beyond protocol checks (javascript:, data:, vbscript:). For production use where untrusted users can submit markdown, use a more comprehensive sanitizer like DOMPurify.
• •Code blocks do not support syntax highlighting — all code is rendered as plain monospaced text. For syntax-highlighted code blocks, use a library like Prism.js or highlight.js in conjunction with a full Markdown parser.

Sources

• Daring Fireball — Markdown Syntax Documentation
• CommonMark — A Standardized Markdown Specification