本文へスキップ
DevTools / Markdown エディター

Markdown エディター

Markdown is the lingua franca of README files, issue trackers, documentation sites and internal notes, and a live preview while writing it is the difference between guessing at table syntax and seeing it render. This editor splits the screen between source and preview, offers a toolbar for the syntax nobody remembers, builds an outline from the headings as you type, and exports either the Markdown or a self-contained HTML file whose inline HTML has been through an allow-list sanitizer.

すべてブラウザ内で実行 — 何もアップロードされません。

Markdown
Preview
Words
84
Characters
704
Lines
29
Reading time
<1 min

Outline

  • # Release notes — v0.2
  • ## Highlights
  • ## Conversion snippet
  • ## Table

仕組み

Markdown is a plain-text convention that a parser converts to HTML. The core syntax — headings with leading hashes, emphasis with asterisks or underscores, links and images in bracket and parenthesis form, lists, blockquotes and fenced code blocks — is stable and defined by the CommonMark specification. Everything beyond that comes from extensions, which is why the same document renders differently in two systems and why the toggles here exist: GitHub Flavored Markdown adds tables, task lists, strikethrough and autolinks, and the line-breaks option decides whether a single newline inside a paragraph produces a line break in the output or is collapsed into a space.

The preview is sanitised because Markdown permits raw HTML, and raw HTML in a document pasted from anywhere is a script-injection risk. The rendered output is parsed by the browser's own HTML parser and rebuilt from an allow-list: known-safe elements and attributes survive, script, style, iframe, form and SVG are dropped, every event handler attribute is removed, javascript: URLs are rejected, and links that leave the site are given rel noopener and nofollow. The result is a preview that renders what a browser would render for the parts that are safe, without executing anything.

The outline is derived from the source rather than from the rendered DOM, which matters because the renderer is loaded lazily and asynchronously while the outline updates instantly on every keystroke. Fenced code blocks are tracked so that a hash inside a shell comment is not mistaken for a heading — a detail that any naive heading scan gets wrong on a document that contains code. Statistics for words, characters, lines and reading time are computed from the same pass.

Export produces either the Markdown source or a complete HTML document with a doctype, a UTF-8 meta tag and the sanitised body. The HTML export is deliberately self-contained and unstyled beyond semantic elements, so it can be opened in a browser, pasted into a CMS that accepts HTML, or used as the starting point for a styled page. What it will not do is preserve Markdown extensions your target renderer does not support — tables converted to HTML stay tables, but a footnote syntax specific to one implementation may not survive.

主な利用シーン

  • Write a README and check that the tables and code blocks render before committing it.
  • Draft release notes or documentation and export them as HTML for a CMS or an email.
  • Preview a Markdown file someone else wrote to see the intended structure.
  • Convert a Markdown document to HTML to paste into a system with no Markdown support.
  • Check the outline of a long document to see whether its heading structure is consistent.
  • Paste untrusted Markdown and see what its raw HTML would do before publishing it anywhere.

最終更新: 2026-10-14 — 本文は英語で表示されます（UI は翻訳済み）。

よくある質問

Which Markdown flavour does this use?

CommonMark plus the GitHub Flavored Markdown extensions for tables, task lists, strikethrough and autolinks, with each of those toggleable. GFM is the most widely implemented extension set, so a document that renders correctly here will render correctly on GitHub, in most static site generators and in most issue trackers. Implementation-specific extras such as footnotes, definition lists and math blocks are not enabled and will appear as literal text.

Is it safe to paste untrusted Markdown?

The preview is safe, because the rendered HTML is rebuilt from an allow-list before it is inserted — scripts, event handlers, iframes and javascript: URLs are all stripped, so a hostile document cannot execute anything in the preview. The exported HTML is sanitised the same way. What you should not do is copy the source of an untrusted document into a system that renders Markdown without sanitising it, since the risk there belongs to that system, not to this one.

Why does my single line break not appear in the preview?

Because CommonMark treats a single newline inside a paragraph as a space and collapses it, which is deliberate: it lets you wrap source lines for readability without affecting the output. Two trailing spaces or a backslash at the end of a line forces a break, and the line-breaks toggle makes every single newline produce one, which is the behaviour many chat applications and issue trackers use. Pick whichever matches the system you are writing for.

Can I use this offline?

Yes, once the page has loaded. The Markdown parser is fetched lazily the first time you type, and after that everything — rendering, sanitising, statistics, export — happens locally with no network access. That makes it usable on a plane or in an air-gapped environment, and it means the document you are writing is never transmitted, which matters for internal documentation that describes systems you would rather not describe to a third party.

関連ツール