ToolLab

Hello Markdown

This is a bold and italic text demo.

Features

  • Real-time preview
  • GitHub Flavored Markdown
  • Syntax highlighting for code blocks

Code Example

function greet(name) {

  return Hello, ${name}!;


}

Table

FeatureStatus
Bold✅
Links✅
Tables✅
This is a blockquote with a link.
  1. First item
  2. Second item
  3. Third item

Markdownプレビューア

左側にMarkdownを書くと、右側にリアルタイムでレンダリング結果が表示されます。見出し・太字・リンク・画像・表・コードブロックなどに対応。HTMLエクスポートもワンクリック。

Markdownとは

Markdownは2004年にJohn Gruberが作成した軽量マークアップ言語です。読みやすく書きやすいプレーンテキスト構文で書式付きテキストを作成できます。.md拡張子のファイルはREADME、ドキュメント、ブログ記事、フォーラムメッセージ、技術文書で広く使われています。アスタリスクで太字・斜体、ハッシュ記号で見出し、ダッシュでリスト、バッククォートでコードを記述する直感的な構文です。

この無料オンラインMarkdownプレビューアは、入力と同時にリアルタイムでレンダリングします。見出し、段落、太字、斜体、取り消し線、リンク、画像、順序付き・順序なしリスト、引用、水平線、表、コードブロックなど、一般的なMarkdown要素をすべてサポートしています。分割表示レイアウトで編集とプレビューを並べて確認でき、レンダリング結果をHTMLファイルとしてエクスポートすることも可能です。

主な機能

  • 入力と同時に更新されるリアルタイムプレビュー
  • 分割表示、エディタのみ、プレビューのみの3つのモード
  • 完全なMarkdownサポート — 見出し、太字、斜体、取り消し線、リンク、画像
  • ヘッダー行と配置に対応した表の表示
  • シンタックス表示付きコードブロック
  • 引用、順序付きリスト、順序なしリスト
  • .mdや.txtファイルのアップロードで既存ドキュメントをプレビュー
  • CSS付きのスタンドアロンHTMLファイルとしてエクスポート
  • 生のHTML出力をクリップボードにコピー
  • 集中して書けるフルスクリーンモード
  • 100%クライアント側処理 — データは一切サーバーに送信されません

使い方

  1. 左側のエディタパネルにMarkdownを入力または貼り付けます。
  2. 右側のプレビューパネルにレンダリング結果が即座に表示されます。
  3. ツールバーで分割表示、エディタのみ、プレビューのみモードを切り替えます。
  4. 「アップロード」ボタンで既存の.mdファイルを読み込みます。
  5. 「HTML」をクリックしてスタンドアロンHTMLファイルとしてダウンロードします。
  6. 「HTMLをコピー」で生のHTMLマークアップをクリップボードにコピーします。

Markdown構文クイックリファレンス

  • 見出し — #でh1、##でh2、###でh3、######まで使用可能
  • 太字 — テキストを**ダブルアスタリスク**で囲む
  • 斜体 — テキストを*シングルアスタリスク*で囲む
  • 取り消し線 — テキストを~~ダブルチルダ~~で囲む
  • リンク — [テキスト] に続けて丸括弧でURLを指定
  • 画像 — ![代替テキスト] に続けて丸括弧で画像URLを指定
  • 順序なしリスト — 行頭に-、*、+を付ける
  • 順序付きリスト — 行頭に1.、2.、3.を付ける
  • コードブロック — トリプルバッククォートで囲む
  • インラインコード — シングルバッククォートで囲む
  • 引用 — 行頭に>を付ける
  • 水平線 — ---を単独行に記述
  • 表 — パイプ|とダッシュ-で列とヘッダーを作成

よくある使用例

  • GitHubリポジトリのREADMEファイルの作成とプレビュー
  • ブログ記事や技術ドキュメントの下書き
  • バージョン管理へのコミット前にMarkdownをプレビュー
  • MarkdownノートをWebサイト埋め込み用のHTMLに変換
  • 即座に視覚的フィードバックが得られるMarkdown構文の学習
  • Markdown対応プラットフォーム向けのテキスト整形

Markdownのヒント

  • 段落間には空行を入れて適切なスペースを確保しましょう
  • 見出しは階層的に使用 — #から始めて、サブセクションでは番号を増やしましょう
  • コードブロックは4スペースインデントかトリプルバッククォートで記述します
  • 表ではパイプ文字を揃えるとソースの可読性が向上します
  • 長いURLにはリファレンスリンクを使用するとMarkdownがすっきりします
  • 公開前にプレビューでフォーマットの問題がないか確認しましょう

よくある質問