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の生成はブラウザ内で行われます。ソースコードおよび出力データは常にデバイス内に留まります。

関連ツール

Webpack設定ジェネレーター

短いフォームからwebpack 5のwebpack.config.jsを生成します。entry・出力フォルダー・モードを設定し、TypeScript、Babel、CSSローダー、HtmlWebpackPlugin、開発サーバーを切り替えるだけです。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

16進数から10進数への変換ツール

16進数を10進数（10進法）に変換します。メモリアドレス、エラーコード、RGBチャンネル、任意精度の整数に対応します。

.gitignore ジェネレーター

Laravel、Node.js、Python、Rails のプロジェクト用除外ルールを組み合わせます。結果をコピーするか、.gitignore 入りの ZIP をダウンロードできます。個人用ルールは別に表示します。

Markdownリンク生成ツール

URLとアンカーテキストからMarkdownリンクの記法を生成します。タイトルのツールチップや、長い文書を読みやすく整える参照形式のリンクにも対応しています。

Dockerfileジェネレーター

5つのアプリ構成に合うDockerfileと.dockerignoreを作成。実際の起動対象、作業ディレクトリ、内部ポートを入力し、両方のファイルを確認できます。

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