📝 Markdownプレビュー＆HTML変換

Markdownを書くと、右側（スマートフォンでは下側）にプレビューがリアルタイムで表示されます。見出し・リスト・チェックボックス・引用・コードブロック・テーブルなど、GitHub風の記法に対応しています。変換後のHTMLはコピーやファイルとしてのダウンロードができます。

Markdown入力

文字数：675文字（空白を除く：547文字） / 行数：49行

プレビュー

Markdownのサンプル

これは太字と斜体と ~~打ち消し線~~ 、そして インラインコード のサンプルです。
行の途中で改行すると、
そのまま改行として表示されます。

リンクと自動リンク

モルドスプーンのようにリンクが書けます。
https://moldspoon.jp/tools のような裸のURLも自動でリンクになります。

引用

引用文はこのように表示されます。

引用の中の引用（ネスト）もできます。

コードブロック

// コードブロックの中では # や ** は変換されません
const greet = (name) => `こんにちは、${name}さん`

テーブル

項目	説明	金額
左寄せ	中央寄せ	右寄せ
りんご	くだもの	120
ぶどう	くだもの	1,480

生のHTML（例：<script>alert(1)</script>）はタグとして解釈せず、文字として表示します。

変換されたHTML

<h1>Markdownのサンプル</h1>
<p>これは <strong>太字</strong> と <em>斜体</em> と <del>打ち消し線</del> 、そして <code>インラインコード</code> のサンプルです。<br />
行の途中で改行すると、<br />
そのまま改行として表示されます。</p>
<h2>リンクと自動リンク</h2>
<p><a href="https://moldspoon.jp" target="_blank" rel="noopener noreferrer">モルドスプーン</a> のようにリンクが書けます。<br />
<a href="https://moldspoon.jp/tools" target="_blank" rel="noopener noreferrer">https://moldspoon.jp/tools</a> のような裸のURLも自動でリンクになります。</p>
<h2>リスト</h2>
<ul>
<li>箇条書きの項目</li>
<li>ネストもできます
<ul>
<li>半角スペース2つ、または4つでインデント
<ul>
<li>さらに深い階層</li>
</ul></li>
</ul></li>
</ul>
<ol>
<li>番号付きリスト</li>
<li>二番目の項目
<ul>
<li>番号付きの中に箇条書き</li>
</ul></li>
</ol>
<ul>
<li class="task-list-item"><input type="checkbox" disabled checked /> 済んだタスク</li>
<li class="task-list-item"><input type="checkbox" disabled /> これからのタスク</li>
</ul>
<h2>引用</h2>
<blockquote>
<p>引用文はこのように表示されます。</p>
<blockquote>
<p>引用の中の引用（ネスト）もできます。</p>
</blockquote>
</blockquote>
<h2>コードブロック</h2>
<pre><code class="language-js">// コードブロックの中では # や ** は変換されません
const greet = (name) =&gt; `こんにちは、${name}さん`
</code></pre>
<h2>テーブル</h2>
<table>
<thead>
<tr><th style="text-align:left">項目</th><th style="text-align:center">説明</th><th style="text-align:right">金額</th></tr>
</thead>
<tbody>
<tr><td style="text-align:left">左寄せ</td><td style="text-align:center">中央寄せ</td><td style="text-align:right">右寄せ</td></tr>
<tr><td style="text-align:left">りんご</td><td style="text-align:center">くだもの</td><td style="text-align:right">120</td></tr>
<tr><td style="text-align:left">ぶどう</td><td style="text-align:center">くだもの</td><td style="text-align:right">1,480</td></tr>
</tbody>
</table>
<hr />
<p>生のHTML（例：&lt;script&gt;alert(1)&lt;/script&gt;）はタグとして解釈せず、文字として表示します。</p>

✅ コピーしました！

ファイルとして保存

※ HTMLファイルは、そのままブラウザで開ける簡単なスタイル付きの1枚のHTMLとして書き出します。

※ 安全のため、入力に含まれる生のHTMLタグはタグとして扱わず、文字としてそのまま表示します。また、javascript: などの危険なリンクは無効化します。

※ 入力内容はすべてブラウザ内で処理しており、弊社サーバーへ送信・保存することは一切ありません。

こんなツールをこれからも作っていきます。もしこれは！と思っていただけましたら、シェア・応援していただけると嬉しいです！😀

X (旧Twitter)

Facebook

LINE

はてブ

リンクコピー

✅ コピーしました！