# Markdown Editor & Live Previewer

Write and edit Markdown syntax with a live side-by-side HTML previewer, formatting controls, and a handy cheat sheet, free to use.

---

- **Canonical URL:** https://dothecalculation.com/calculators/markdown-editor-calculator
- **Category:** Everyday utilities
- **Publisher:** Do The Calculation (https://dothecalculation.com)
- **Cost:** Free, no account or sign-up required
- **Privacy:** Runs entirely in the browser; inputs are never sent to a server
- **Methodology:** https://dothecalculation.com/methodology

---

## Markdown Editor & Live Previewer

Format documents with a dual-pane editor and previewer, export HTML output, and utilize a quick formatting cheat sheet.

- Split-screen live HTML preview
- Common formatting buttons
- HTML export code copy

## Philosophy and History of Markdown

Markdown is a lightweight markup language created in 2004 by John Gruber, with collaboration from Aaron Swartz. The goal of the project was to create a syntax that is easy to write and, most importantly, highly readable in its raw text form. Unlike HTML, which uses complex tag syntax (like `<strong>` or `<a>`), Markdown uses simple symbols that match existing plain-text formatting conventions, such as asterisks for emphasis and bracket sets for links.

By keeping the formatting syntax clean, Markdown allows writers to focus on composing content without getting distracted by markup layout. Over the past two decades, it has become the standard formatting choice for software developers, README files, static site generators, and writing platforms.

## Standard Syntax vs. GitHub Flavored Markdown (GFM)

The original Markdown specification left many edge cases undefined. To resolve these ambiguities and support advanced publishing features, different organizations developed specialized flavors of Markdown:

• Standard Markdown / CommonMark: CommonMark is a highly standardized specification of Markdown that fixes parser inconsistencies across platforms. It defines core styling rules for headers, lists, code blocks, and blockquotes.

• GitHub Flavored Markdown (GFM): GFM is an extension of CommonMark used across the GitHub ecosystem. It adds support for interactive task lists, tables, strikethroughs, autolinks, and raw HTML formatting.

• MDX: MDX is a modern extension that allows developers to write JSX components directly inside Markdown files, creating highly interactive, React-driven content pages.

## Compiling, Abstract Syntax Trees (ASTs), and HTML Generation

When you type text into a Markdown editor, the editor compiles the raw text into standard HTML tags for the browser to render. This parsing pipeline generally involves three stages:

1. Lexical Analysis: The parser scans the text and breaks it into syntactic tokens (such as headers, bold chunks, and paragraphs).

2. AST Construction: The tokens are structured into an Abstract Syntax Tree (AST), a hierarchical representation of the document structure. Popular web libraries like remark use this AST model.

3. HTML Compilation: The compiler traverses the AST and outputs equivalent HTML tags. For instance, `# Title` compiles to `<h1>Title</h1>`, and `**Text**` compiles to `<strong>Text</strong>`. This output is then rendered dynamically in the preview panel.

## Document Sanitization and Security

Allowing users to write Markdown that compiles directly into HTML presents serious security risks. Because standard Markdown specifications allow writers to include raw HTML tags, an attacker could write malicious JavaScript inside `<script>` blocks or use target events (like `onload` or `onerror` in image tags) to run cross-site scripting (XSS) payloads.

To mitigate this threat, markdown previewers must run the generated HTML through a strict sanitization library, such as DOMPurify. Sanitization strips out executable scripts, event handlers, and unsafe iframe wrappers while leaving safe presentation elements (like headers, paragraphs, and list blocks) untouched. Developers should never render compiled markdown using React's `dangerouslySetInnerHTML` without verifying that sanitization has been applied.

## How to Use This Markdown Editor

Type or paste Markdown into the source panel, or use the formatting toolbar (Bold, Italic, headings, blockquote, inline code, and link buttons) to insert syntax around your selected text. Switch between Split View, Preview Only, and Raw HTML using the tabs at the top.

Use Raw HTML mode when you need to copy the compiled markup into a static site generator, CMS, or email template, and use Copy HTML to grab it in one click.

## Worked Example: Compiling a Heading and Bold Text

Typing `# Markdown Editor` compiles to an `<h1>` heading element, and `**bold**` compiles to `<strong>bold</strong>` — confirmed by running the editor's actual regex-based compiler against these exact inputs.

The default sample document combines headings, bold and italic text, a fenced code block, and a blockquote, demonstrating how each syntax element maps to its corresponding HTML tag in the live preview.

## Related Calculators

This editor is part of a Text & Encoding Tools cluster. To check word and character counts in your draft, use the [Word Counter Calculator](/calculators/word-counter-calculator). For comparing two versions of a document, see the [Text Diff & Comparison Tool](/calculators/text-diff-calculator).

## Frequently asked questions

### What is Markdown and who created it?

Markdown is a lightweight markup language with a plain-text formatting syntax. It was created in 2004 by John Gruber in collaboration with Aaron Swartz, aiming to make formatting text easy and readable without code tags.

### What is the difference between CommonMark and GFM?

CommonMark is a strict, standardized specification of Markdown designed to resolve parsing inconsistencies. GitHub Flavored Markdown (GFM) is an extension built on top of CommonMark, adding support for tables, task lists, strikethroughs, and autolinks.

### Can I write raw HTML inside a Markdown document?

The core Markdown specification allows mixing in raw HTML, but this editor escapes angle brackets and ampersands before compiling, so any HTML tags you type will display as visible text rather than render as live markup. This is a deliberate safety choice — many Markdown tools that do render raw HTML require a separate sanitization step to stay safe from XSS.

### How do you create a table in Markdown?

Tables are created using pipes (|) to separate columns and hyphens (-) to define the header row. You can align column text by placing colons (:) on the left, right, or both sides of the hyphen divider line.

### What is MDX and how does it relate to Markdown?

MDX is an extension of Markdown that lets you import and render interactive React components (JSX) directly inside your Markdown content. It is widely used in modern documentation sites and static site frameworks.

### How do I prevent Cross-Site Scripting (XSS) in a markdown previewer?

To prevent XSS, you must pass the generated HTML output through a sanitization library (such as DOMPurify) to strip out malicious script tags, iframe targets, and event listeners before rendering it to the DOM.

### Why does my line break not render as a new paragraph?

In standard Markdown, a single line break is ignored by the parser to prevent layout issues. To create a line break, add two spaces at the end of the line before pressing enter, or press enter twice to start a new paragraph block.

### How do you insert code blocks with syntax highlighting?

Code blocks are created by wrapping code with triple backticks (```). You can enable language-specific syntax highlighting by adding the language name (like js, python, or html) immediately after the starting triple backticks.

### What is an AST (Abstract Syntax Tree) in Markdown compilation?

An AST is a tree-like object representation of your Markdown document's structural elements. Parsers like remark compile raw text into an AST, allowing programs to modify, transform, or analyze the document nodes before compiling them to HTML.

### How do I write mathematical equations in Markdown?

While standard Markdown doesn't support math natively, many markdown editors integrate KaTeX or MathJax. These plugins render mathematical formulas wrapped in single dollar signs ($) for inline math, and double dollar signs ($$) for display block math.

## Related concepts

- **Markup languages** — Systems for annotating a document in a way that is syntactically distinguishable from the text.
- **HTML compiling** — Translating markdown elements into standard HTML elements.
- **DOM sanitization** — Cleaning HTML string payloads to remove malicious scripts before rendering.

## Related guides

- [Understanding Calculator Formulas: How DTC Turns Inputs into Results](https://dothecalculation.com/blog/site-guides/understanding-calculator-formulas) — Understand how Do The Calculation formulas are presented, what the explanation blocks mean, and how to verify calculator logic before using a result in a real decision.

## Related calculators

- [Regular Expression (Regex) Tester & Explainer](https://dothecalculation.com/calculators/regex-tester-calculator) — Test and debug regular expressions with real-time match highlighting, group capture breakdown, and a handy free cheat sheet.
- [HEX, RGB, HSL & CMYK Color Converter](https://dothecalculation.com/calculators/color-converter) — Instantly convert colors between HEX, RGB, HSL, and CMYK formats with a live color swatch preview and interactive HSL sliders.
- [HTML Entities Encoder & Reference Table](https://dothecalculation.com/calculators/html-entities-calculator) — Encode and decode HTML entities and browse a complete reference chart of special characters and ASCII codes instantly for free.
- [JSON Formatter, Validator & Minifier](https://dothecalculation.com/calculators/json-validator-calculator) — Format, validate, minify, and repair JSON strings with a collapsible tree viewer and syntax error highlights instantly and free.
- [Text Diff & Comparison Tool](https://dothecalculation.com/calculators/text-diff-calculator) — Compare two text blocks side by side or inline to find differences, highlight changes, and compute similarity instantly for free.
- [Tip Calculator](https://dothecalculation.com/calculators/tip-calculator) — Calculate tips instantly, see the total bill amount with tax, and split costs evenly among any number of people for free.

---

_This calculator is for general educational and reference purposes only. Results are estimates and should not be used as the sole basis for critical decisions._

---

_Source: [Do The Calculation](https://dothecalculation.com/calculators/markdown-editor-calculator). Quote freely with attribution and a link to this page._