テキスト

Markdown Preview / HTML ↔ Markdown

MarkdownをフォーマットされたHTMLとしてライブプレビューし、Markdown → HTMLとHTML → Markdownの双方向変換も可能。

Markdown is a lightweight markup language that formats text with plain characters (**bold**, # heading, - list) and stays readable even unrendered. This tool gives you a live preview of Markdown as HTML and converts in both directions.

How to use it

Common uses

Things to keep in mind

Different platforms (GitHub, GitLab, Discord) support slightly different Markdown extensions (tables, strikethrough, checkboxes) — the base syntax is the same everywhere.

Converting HTML to Markdown loses whatever Markdown can't express: complex layout, inline styles, deeply nested elements.

このツールに関する記事: Markdown:ドキュメント作成の標準になった理由

よくある質問

どのような変換が提供されていますか?

3つのモードがあります: フォーマットされたHTMLとしてレンダリングされたMarkdownのライブプレビュー、明示的なMarkdown → HTML変換、および逆のHTML → Markdown変換。

どのMarkdownレンダリングエンジンが使われていますか?

これはJavaScriptによるシンプルなクライアントサイドMarkdownレンダリングであり、BladeやTwigのような特定のサーバーサイドテンプレートエンジンとは無関係です。結果は標準のMarkdownを反映し、フレームワーク固有の構文ではありません。

私のMarkdownまたはHTMLコンテンツはサーバーに送信されますか?

いいえ、変換とプレビューはブラウザ内で完全に行われ、コンテンツはオンラインに送信されません。

なぜ同じファイルがアプリによって見た目が違うのですか?

オリジナルのMarkdownは表、取り消し線、コードブロックのシンタックスハイライトを定義していません — これらはさまざまな実装による拡張です。GitHub Flavored MarkdownとCommonMark仕様は一部の曖昧なケースを異なる方法で扱うため、同じファイルのレンダリングがパーサーによって異なることがあります。

複雑なHTMLをMarkdownに変換すると何が失われますか?

HTMLは基本的なMarkdownよりもはるかに多くの書式オプションをサポートしているため、複雑な表、ネストしたスタイル、独自のマークアップは逆変換の際に簡略化されたり失われたりすることがあります。

記事: テキスト

camelCase、snake_case、kebab-case:どの場面でどれを使うか

なぜcamelCase、snake_case、kebab-caseが存在し、それぞれ普通どこで使われるか。

Text Diff:テキストの差分検出アルゴリズムの仕組み

diffアルゴリズムがテキストの2つのバージョン間の最小変更セットをどう見つけるか。

正規表現:基本と貪欲マッチの罠

正規表現における貪欲マッチと非貪欲マッチの違いと、それが実務でなぜ重要か。

行のソート:アルファベット順と数値順はなぜ違うのか

アルファベット順ソートが数値をテキストとして扱う理由と、数値ソートとの違い。

文字列エスケープ:JS、JSON、シェル、正規表現でルールが異なる理由

あらゆる場面で通用する単一のエスケープルールが存在しない理由 — JS、JSON、シェル、正規表現それぞれに固有のルールがある。

CRLFとLF:改行コードが今も問題を引き起こす理由

CRLFとLFの違いがどこから来たのか、そしてgitやスクリプトで今も問題を引き起こす理由。

文字数と単語数のカウント:Unicodeがなぜこれを複雑にするか

Unicodeにおいて視覚的に1つの絵文字が複数のコードポイントから成り立つことがある理由。

Lorem Ipsum:このダミーテキストはどこから来て、なぜ意味がないのか

Lorem Ipsumテキストが実際どこから来たのか、そして実際のテキストの代わりに無意味なテキストが使われる理由。

Slugify:タイトルが有効なURLに変換される仕組み

記事タイトルがハイフンで区切られたクリーンで読みやすいURLに変換される仕組み。

見えない空白文字:見た目が同じテキストの比較がなぜ失敗するのか

見えない空白文字1つが、見た目上同じ2つのテキストの比較を失敗させる仕組み。

テキストの反転:絵文字でなぜ壊れるのか

単純なテキスト反転が、複数のコードポイントから成る絵文字をなぜ壊してしまうのか。

テキスト頻度分析:ワードクラウドから暗号解読まで

文字頻度分析が歴史的にどう単純な換字式暗号の解読に役立ったか。