Softonic

MarkdownからHTMLへの変換ツール

ステップ 1 / 3
次へ

Markdownを貼り付け、クリアで意味に基づいたHTMLを復元します、<h1>から<h6>、<ul>、<ol>、<table>、<pre><code>（ハイライトされた構文付き）、<blockquote>、自動リンクされたURLを含みます。既存のページに組み込む場合か独立したファイルを作成する場合かに応じて、「完全ドキュメント」（<html>、<head>および最小限のスタイルシートを含む）または「フラグメント」（本文内容のみ）を選択してください。

MarkdownをHTMLに変換する方法

  1. 1

    Markdownを貼り付ける

    完全なドキュメントまたはスニペットです。YAMLのフロントマターが存在する場合は自動的に削除されます。

  2. 2

    拡張セットを選択します

    CommonMarkのみ、GFM（テーブル、タスクリスト、オートリンク）、またはGFM＋数学式

  3. 3

    出力モードを選択してください

    埋め込み用フラグメント、またはヘッダーと最小限のCSSを含む完全なHTMLドキュメント。

  4. 4

    HTMLをコピーまたはダウンロードします

    HTMLをテキストとして取得するか、`.html`ファイルとして保存してください。

マッピングテーブル

Markdown HTML
# Heading 1 <h1>Heading 1</h1>
**bold** <strong>bold</strong>
*italic* <em>italic</em>
`code` <code>code</code>
言語指定付きのフェンスコード <pre><code class="language-js">
- item <ul><li>item</li></ul>
1. item <ol><li>item</li></ol>
> quote <blockquote><p>quote</p></blockquote>
[text](url) <a href="url">text</a>
![alt](src) <img src="src" alt="alt">
--- <hr>
GFMテーブル <table><thead>...</thead>...
- [x] done <input type="checkbox" checked disabled>

構文ハイライト

言語ヒントが付いたフェンス付きコードブロックには、<code>要素にclass="language-xxx"属性が設定されます。また、「事前ハイライト」を有効にすると、highlight.jsが生成したトークン化済みの出力もコンバーターによってインライン化されます。これは、対象ページにハイライト用のランタイムが読み込まれていない場合に便利です。

完全ドキュメントと断片の比較

  • 断片は内部のHTMLのみを指します。<h1>または最初の要素から始まり、既存のCMSブロック、メール本文、またはフロントエンドコンポーネントに貼り付けます。
  • 完全ドキュメントは断片を<!DOCTYPE html>、<html>、<head>で包み、小さなデフォルトのスタイルシート（タイポグラフィ、コードブロック、テーブル）を付けます。これを .html として保存すると、追加のファイルなしで任意のブラウザで開けます。

インラインCSSと外部CSSの比較

  • インラインスタイル（オン/オフ切り替え）は、すべてのCSSを直接要素に適用します。見た目は美しくありませんが、メールテンプレートでは確実に機能します。
  • クラス（デフォルト）はHTMLを簡潔に保ち、スタイル設定はサイトのスタイルシートで処理することを想定しています。

アクセシビリティに関する注意

  • 見出しは意味に基づいた<h1>–<h6>としてレンダリングされ、階層構造が保持されます。ソースでレベルをスキップしないでください。
  • 代替テキストのない画像は<img alt="">を生成します（装飾用画像には意図的に空の代替テキストが設定されます）。ただし、その画像が本当に装飾目的でない限り、必ず代替テキストを追加してください。
  • テーブルはヘッダー行に<thead>が付与され、スクリーンリーダーでのナビゲーションが改善されます。

よくある質問

はい。ソースの生HTMLはスクリプトタグおよびイベント属性が削除されたまま渡されます。未処理の出力が必要な場合（入力内容を信頼している場合）、トグルボタンがありますが、ユーザーが提供したコンテンツには使用しないでください。

GFMタスクリスト（- [x]、- [ ]）は<input type="checkbox" disabled>要素に変更されます。disabled属性により、レンダリングビューにおける誤った状態変更を防止します。

はい、インラインスタイルを有効にしてください。このコンバーターは各ブロックに最小限のスタイル属性をインライン化します。これは、<style>ブロックを削除するメールクライアント（Outlook、Gmail）が必要とする機能です。

数学拡張機能および$x^2$または$$...$$ブロックをKaTeXを通じてレンダリング可能にします。コンバーターは静的なSVGまたはHTMLを出力するため、実行時のMathJaxは不要です。

いいえ、解析およびHTMLの生成はブラウザ内で行われます。ソースコードおよび出力データは常にデバイス内に留まります。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

EditorConfig ジェネレーター

インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。

メールアドレス検証ツール

メールアドレスを検証します。RFC 5322構文チェック、MXレコードのライブ確認に加え、ローカル部、ドメイン、長さの詳細を表示します。メールは送信されません。

このツールは他の言語でも利用できます