Markdown Preview

How to Use the Markdown Preview

This free online Markdown preview tool provides a real-time side-by-side editing experience. Type or paste Markdown on the left and instantly see the rendered HTML preview on the right. You can also copy the generated HTML to use in your projects. The entire conversion happens in your browser, so nothing is sent to a server and your content remains completely private.

What is Markdown?

Markdown is a lightweight markup language created by John Gruber in 2004. It allows you to write formatted text using plain text syntax that is easy to read and write. Markdown is widely used for README files on GitHub, documentation sites, blog posts, forum comments, and note-taking applications. It supports headings, bold and italic text, links, images, code blocks, lists, blockquotes, and more.

Supported Syntax

This tool supports core Markdown syntax including six levels of headings (# through ######), bold text (**bold**), italic text (*italic*), inline code (`code`), fenced code blocks with language hints, links ([text](url)), images (), unordered lists (- item), ordered lists (1. item), blockquotes (> quote), and horizontal rules (---). The preview updates instantly as you type, making it easy to experiment with formatting.

When to Use a Markdown Preview

A Markdown preview is invaluable when writing documentation, README files, blog posts, or any content that will be rendered from Markdown. It helps you catch formatting errors immediately, see how your content will look before publishing, and iterate quickly on layout and structure. This tool is especially useful when you do not have a dedicated Markdown editor installed or need to quickly preview content in any browser.

Markdown Previewの使い方

このツールはMarkdownをリアルタイムでHTMLプレビューできる無料のオンラインエディタです。左側にMarkdownを入力すると、右側に即座にレンダリング結果が表示されます。見出し、太字、斜体、リンク、画像、コードブロック、リストなどの主要なMarkdown構文に対応しています。生成されたHTMLはワンクリックでコピー可能です。

1. GitHub READMEの下書き確認

README.mdをpushしてから「見出しの階層が崩れていた」「リストが入れ子になっていない」と気づくと、修正だけのコミットが積み重なります。push前に本ツールへ貼り付ければ、見出し・リスト・コードブロックの構造をその場で確認できます。なおタスクリスト(- [ ])や打ち消し線はGFM(GitHub Flavored Markdown)拡張のため、最終表示はGitHub上でも確認してください。

2. ブログ・技術記事の入稿前チェック

Zenn・Qiita・はてなブログなどMarkdown入稿のサービスは、改行やテーブルの解釈がレンダラーごとに微妙に異なります。先に本ツールで「段落が意図どおり分かれているか」「強調記号が文字のまま残っていないか」といった基本構造を固めてから入稿すると、プラットフォーム側での手戻りが減ります。

3. Markdown→HTML変換の起点として

「HTMLをコピー」ボタンで生成HTMLを取得し、CMSのHTMLブロックやメールテンプレートに貼り付けられます。逆方向(既存のWebページやHTMLメールをMarkdown化)はHTML to Markdownが便利です。コピーしたHTMLを整形して読みやすくするならHTML Formatterを併用してください。

よくある落とし穴 / Common Pitfalls

Markdownは構文エラーで処理が止まらず、「意図と違う見た目」として静かに崩れます。プレビューで気づきやすい代表的な崩れ方と原因をまとめました。

Markdown never throws an error — it silently renders something you did not intend. These are the breakages you will catch most often in a live preview.

言語別コード例 / Code Examples by Language

Markdown→HTML変換をプログラムで行う場合の最小サンプルです。変換結果をWebページへ挿入するときは、XSS対策としてサニタイズを必ず挟んでください。

Minimal snippets to convert Markdown to HTML in code. Always sanitize the output before injecting it into a page.

JavaScript / TypeScript (marked)

// npm install marked dompurify
import { marked } from "marked";
import DOMPurify from "dompurify";

const html = await marked.parse("# Hello **Markdown**");
// XSS対策 / Sanitize before inserting into the DOM
element.innerHTML = DOMPurify.sanitize(html);

Python (markdown)

# pip install markdown
import markdown

html = markdown.markdown(
    "# Hello **Markdown**",
    extensions=["tables", "fenced_code"],  # GFM風の拡張を有効化
)
print(html)  # <h1>Hello <strong>Markdown</strong></h1>

Go (goldmark)

// go get github.com/yuin/goldmark
import (
    "bytes"

    "github.com/yuin/goldmark"
)

var buf bytes.Buffer
if err := goldmark.Convert([]byte("# Hello **Markdown**"), &buf); err != nil {
    // 変換失敗 / conversion failed
}
html := buf.String()

Shell (pandoc)

# ファイルを変換 / Convert a file (GFM -> HTML)
pandoc README.md -f gfm -t html -o readme.html

# 文字列を直接変換 / Convert an inline string
echo "# Hello **Markdown**" | pandoc -f markdown -t html

Before / After 実例 / Before & After

例1: README断片をHTMLへ / README snippet to HTML

## Install

- Node.js 20+
- `npm install`

↓ 「HTMLをコピー」で取得 / Output of "Copy HTML"

<h2>Install</h2>
<ul><li>Node.js 20+</li>
<li><code>npm install</code></li></ul>

例2: つながってしまう改行を分ける / Splitting merged lines

1行目
2行目(同じ段落に結合される)

↓ 空行を入れる / Insert a blank line

1行目

2行目(別の段落になる)

単一改行は段落内の折り返し扱い。段落を分けたいときは必ず空行を挟む。

A single newline is a soft wrap inside the paragraph. Use a blank line to start a new paragraph.

例3: 平坦になった入れ子リストの修正 / Fixing a flat nested list

- 親項目
 - 子項目(1スペース: 同列に並んでしまう)

↓ 4スペースに揃える / Indent by 4 spaces

- 親項目
    - 子項目(ほぼ全レンダラーで入れ子になる)

Why browser-only? / なぜブラウザ完結か

Markdown drafts are often the most sensitive text you handle: unreleased product announcements, internal runbooks, incident postmortems, or README files for private repositories. Setup guides routinely embed API keys and connection strings inside code blocks. Pasting such a draft into a server-rendered preview service transmits the full text to a third party before you ever hit publish. DevToolBox converts Markdown to HTML entirely inside your browser with a small JavaScript function — no network request is made, nothing is logged, and nothing is stored. You can verify this yourself: open your browser's DevTools, switch to the Network tab, and type into the editor; no requests appear. Because the conversion is local, the tool keeps working offline once the page has loaded, which is handy when writing documentation on a plane or inside a restricted corporate network.

未公開のリリースノート、社内手順書、障害報告書、プライベートリポジトリのREADMEなど、Markdownの下書きには公開前の機密情報が含まれがちです。セットアップ手順のコードブロックにAPIキーが書かれていることも珍しくありません。本ツールは変換をすべてブラウザ内のJavaScriptで実行し、ネットワーク送信を一切行いません。DevToolsのNetworkタブが空のままであることで確認でき、ページ読み込み後はオフラインでも動作します。