📝
無料マークダウンエディター
Markdown をリアルタイムで作成してプレビューします。見出し、太字、斜体、コード ブロック、表、リストをサポートします。
読み込み後はオフラインでも動作
55 単語 · 402 文字
Markdown
プレビュー
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Markdownエディターへようこそ</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">左側で <strong>Markdown</strong> を書き、右側でライブプレビューを表示します。</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">機能</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>太字</strong>、<em>イタリック</em>、<del>打ち消し線</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">インラインコード</code>とコードフェンス</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">リンク</a></li><li class="my-0.5">リスト、ブロッククォート、テーブルなど</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">コード例</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdownは2004年にJohn Gruberによって作成され、Webの執筆を簡単にするためのものです。</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">機能</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">サポート</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">見出し</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">リスト</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">テーブル</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">コード</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown チートシート
# Heading 1H1
**bold**太字
*italic*斜体
`code`インラインコード
- item箇条書き
1. item番号付きリスト
> quoteブロック引用
[text](url)リンク
画像
---区切り線
主な用途
- Markdown で API ドキュメントを作成Markdown でエンドポイントの説明、リクエスト/レスポンス例、パラメーター テーブルを下書きします。
- Markdown でメモを作成Markdown で構造化メモを記述して、Notion、Obsidian、Bear、または任意の Markdown アプリに貼り付けます。
- MarkdownでGitHub READMEを書くライブMarkdown描画でGitHubリポジトリのREADMEをドラフトして確認。
- 技術ドキュメントを書く公開前にMarkdownでAPI文書、ウィキ、技術ガイドを作成して確認。
- Markdownでブログ記事を書くGhost、Jekyll、Hugo、Hashnode、その他のMarkdownベースのパブリッシングプラットフォーム向けブログ記事をドラフト。
使い方
プレビューは、ツールに直接組み込まれた手書きのMarkdownパーサーによって描画されます — marked、remark、外部ライブラリは不要です。ブラウザ内でソースを行ごとにトークン化し、構文をHTMLに変換した後、表示前にサニタイザーを通します。
- 1行ごとのトークン化カスタムのrenderMarkdown関数はソースを改行で分割し、フェンス付きコードブロック、見出し（H1〜H6）、引用、順序付き・順序なしリスト、GFMテーブル（列の配置付き）、水平線、段落を優先順位順に照合しながら一度のパスで処理します。
- 2インライン構文の展開収集された各行またはセルは、その後inlineMarkdownによって処理されます。これは太字（**と__）、斜体（*と_）、太字斜体（***）、取り消し線（~~）、インラインコード、画像（）、リンク（[text](url)）を処理する正規表現置換のチェーンです — 画像はリンクより先に解決され、!プレフィックスが誤って消費されることを防ぎます。
- 3サニタイズとリモートリソースのブロックレンダラーが生成した生のHTMLはサニタイザー（sanitize-html）を通され、<script>、onerrorハンドラー、javascript:href のような安全でないタグや属性が取り除かれます。2回目のパス（neutralizeRemote）はデフォルトでリモート画像のsrc値をプレースホルダーに置き換え、あなたが同意する前にプレビューが外部サーバーへ黙って通信するのを防ぎます。
- 4.mdまたは単独の.htmlとしてエクスポートMarkdownのコピーやダウンロードは生のソーステキストを書き出します。HTMLをダウンロードすると、サニタイズされた出力が自前のインラインスタイルシートを持つ自己完結型のドキュメントとしてラップされます — Tailwindのクラスはサイト内でのみ機能するため、エクスポートには代わりに通常のCSSルールが同梱され、どこでも読めるファイルになります。
関連ツール
HTMLからマークダウンコンバーター
HTML をクリーンな Markdown に変換します。見出し、リスト、リンク、画像、コード ブロック、表、ブロック引用符を処理します。 CMS からコンテンツを移動するのに最適です。
試してみる
マークダウンからHTMLへのコンバーター
ライブ プレビューを使用して Markdown をクリーンな HTML に変換します。ソース ビューを使用して、すぐに貼り付けられる HTML をブログ、CMS、または電子メール テンプレートにコピーします。
試してみる
Mermaidダイアグラムエディター
Mermaid構文でフローチャート・シーケンス図・ガントチャートなどをライブプレビューしながら記述できます。SVG・PNGとしてエクスポート可能。ブラウザ内で完全に動作します。
試してみる