How to

How to use Markdown Preview

Edit Markdown while checking the preview, HTML output, and code block display on the same screen. You can format headings and lists, switch themes and views, then copy Markdown or HTML or download HTML.

Use Markdown Preview

Use Cases

When to use it

Draft articles or documents while checking their appearance
Compare code block or quote rendering across themes
Review long Markdown in fullscreen while editing
Check how a README looks before pushing to GitHub
Compare syntax-highlighted code blocks across multiple themes
Quickly review the output of a Markdown template

Capabilities

What this tool can do

Edit Markdown and preview side by side
Switch themes
Toggle split view and fullscreen
Syntax highlighting in code blocks
Toggle between editor and fullscreen preview
Compare rendering across multiple themes side by side

Guide

How to use each screen area

Learn how to use each screen area, including settings, input, previews, results, and saving.

01 HOWTO

Markdown input area

Edit Markdown directly in the left input area. Add headings, paragraphs, separators, quotes, lists, code, and tables while checking the preview.

What this area does

Enter Markdown body text directly.
Edit headings, paragraphs, quotes, and lists.
Check edits in the preview on the right.
Continue editing long text while scrolling.

Where to use it

Heading level

Insert H1 through H6 hierarchy from the heading level selector.

Emphasis and inline code

Use bold, italic, strikethrough, and inline code for important terms and short code fragments.

Quotes and lists

Use quotes, bullet lists, and numbered lists to organize explanations and steps.

Links, images, code, and tables

Add links, images, code blocks, and tables for technical notes or guides.

02 HOWTO

Formatting toolbar and editing helpers

Use the toolbar and upper editing controls to format text, toggle line numbers and wrapping, clear or copy Markdown, review history, undo, and redo.

What this area does

Insert Markdown syntax with toolbar buttons.
Toggle line numbers and line wrapping.
Clear or copy Markdown.
Adjust editing state with history, undo, and redo.

Where to use it

Quotes, bullets, and numbered lists

Add quotes, bullet lists, and numbered lists with toolbar buttons.

Links, images, code blocks, and tables

Insert links, images, code blocks, and tables from the toolbar.

History, undo, and redo

Use Markdown history, undo, and redo to return to or reapply recent edits.

Headings and input display

Use heading level, line numbers, and line wrapping to make long Markdown easier to edit.

03 HOWTO

Preview, theme, and layout area

Review the rendered Markdown in the preview and switch theme, split view, Go to Markdown, Go to editor, and fullscreen display.

What this area does

Review the rendered Markdown preview.
Switch themes such as GitHub Light.
Use split view, Go to Markdown, and Go to editor.
Expand the review area with fullscreen.

Where to use it

Theme

Switch preview themes to check an appearance closer to the sharing destination.

Layout switching

Use split view, Go to Markdown, and Go to editor to switch between editing and review.

Fullscreen view

Review long documents and code blocks in a wider area.

Preview review

Check rendered headings, paragraphs, quotes, lists, code, and tables.

04 HOWTO

HTML output and code block review area

Use the HTML tab, copy and download HTML, and review code block language, line numbers, wrapping, and copy controls for the destination format.

Screen showing HTML output and code block review in Markdown Preview

What this area does

Review HTML output.
Copy or download HTML.
Review code block language.
Use code line numbers, wrapping, and copy.

Where to use it

HTML copy and download

Use the HTML output controls to copy HTML or download it as an HTML file.

Screen showing where to copy HTML and download HTML in Markdown Preview

Review layout again

Return to split view or move between areas before taking the output.

Review theme again

Change the theme again to review readability in the preview or HTML output.

Code block helpers

Review code language, line numbers, line wrapping, and code copy controls.

Notes

Important points are grouped with reasons so you can make decisions before using the tool.

Things to check

Edit the Markdown input and review the preview side by side

Changes in the Markdown input are reflected in the preview. Review headings, quotes, lists, code, and tables while editing.

Things to check

Use layout controls and themes for the task at hand

Split view, Go to Markdown, Go to editor, and fullscreen view help you move between editing and focused review.

Things to check

Choose Markdown, HTML, or code output depending on the destination

In addition to copying Markdown, you can copy and download HTML, and use language, line number, wrapping, and copy controls in code blocks.

FAQ

Questions about Markdown Preview

Questions that make decisions easier before use are summarized first.

Is there a reason to use this instead of GitHub?

Yes. It is useful when you want to compare themes, inspect long documents in fullscreen, or fine-tune content while keeping the editor and preview side by side.

Is it suitable for long text or code blocks?

Yes. You can switch between split view, single-pane view, and fullscreen, which makes long text and code blocks easier to review.

Can it display images and links?

Standard Markdown syntax is supported. Local image paths are not loaded — use a URL pointing to a publicly hosted image instead.

Can I save the Markdown I write?

There is no auto-save. Copy the text and save it elsewhere, or use your browser's save function.

Are Markdown tables supported?

Yes. The standard Markdown table syntax is supported and rendered according to the active theme.

Can I open multiple files at the same time?

This page has a single Markdown input area. Editing multiple files simultaneously is not supported.

Next guides

Related guides

Related guides are listed next so you can continue without getting lost.

A screen-area guide for entering before and after text, choosing language and diff unit, ignoring whitespace, syncing scroll, reviewing highlights, copying, and clearing.

View guide

Compress multiple images in their original format, compare size changes, and save the results.

View guide

Learn where to load multiple images, choose format and quality, review conversion results, download individually, download as ZIP, and convert again.

View guide

Image Tools Video Tools Text Tools Developer Tools Design Tools Generator Tools

How to use Markdown Preview

When to use it

What this tool can do

How to use each screen area

Markdown input area

What this area does

Where to use it

Heading level

Emphasis and inline code

Quotes and lists

Links, images, code, and tables

Formatting toolbar and editing helpers

What this area does

Where to use it

Quotes, bullets, and numbered lists

Links, images, code blocks, and tables

History, undo, and redo

Headings and input display

Preview, theme, and layout area

What this area does

Where to use it

Theme

Layout switching

Fullscreen view

Preview review

HTML output and code block review area

What this area does

Where to use it

HTML copy and download

Review layout again

Review theme again

Code block helpers

Notes

Edit the Markdown input and review the preview side by side

Use layout controls and themes for the task at hand

Choose Markdown, HTML, or code output depending on the destination

Questions about Markdown Preview

Is there a reason to use this instead of GitHub?

Is it suitable for long text or code blocks?

Can it display images and links?

Can I save the Markdown I write?

Are Markdown tables supported?

Can I open multiple files at the same time?

Related guides

How to use Text Diff

How to Use Image Compression

How to use Image Format Conversion