Back

Markdownプレビュー

Markdownはプレーンテキスト構文を使用してフォーマットされたテキストを作成する軽量マークアップ言語です。ドキュメント、READMEファイル、メモ取りに人気があり、表示用にHTMLにレンダリングされます。このツールはライブレンダリングでMarkdownをプレビューし、ドキュメント構造（見出し、リンク、画像）を抽出し、HTMLに変換できます。

仕様

よくあるユースケース

  • コミット前のREADME.mdファイルのプレビュー
  • ドキュメントのフォーマットレビュー
  • 検証のためのドキュメント内の全リンクの抽出
  • 埋め込み用にMarkdownをHTMLに変換
  • ドキュメント構造とナビゲーションの分析

機能

  • HTMLレンダリングによるライブプレビュー
  • ドキュメント構造の抽出（見出しを目次として）
  • ドキュメント内のすべてのリンクと画像の一覧
  • 言語ヒント付きのコードブロックの検出と表示
  • フロントマター（YAMLメタデータ）の解析
  • クリーンなHTML出力への変換
  • 単語数と文字数の統計

例

機能付きREADME

試してみる →

見出し、リスト、コードを含む典型的なプロジェクトREADME。

# My Project

A brief description of what this project does.

## Installation

```bash
npm install my-project
```

## Features

- **Fast** - Optimized for speed
- **Simple** - Easy to use API
- **Flexible** - Works with any framework

## Links

- [Documentation](https://docs.example.com)
- [GitHub](https://github.com/example/project)

ヒント

  • 見出しには#を使用します（# H1、## H2、### H3など）。
  • コードブロックはオプションの言語識別子付きトリプルバッククォートを使用します。
  • リンクは[テキスト](url)構文、画像は![alt](url)を使用します。
  • ---行間のフロントマターにはYAMLメタデータを含められます。

解説 Markdownプレビュー

MarkdownはJohn Gruberが2004年に作成した軽量マークアップ言語で、プレーンテキストとして読みやすく、HTMLにクリーンに変換できるように設計されています。その構文はフォーマットを視覚的に示唆する句読文字を使用します: 見出しに#、強調に*、リストに-、コードにバッククォート。Markdownファイルはレンダリングなしでも有用であり、これがドキュメント、READMEファイル、技術文書でこのフォーマットが支配的な理由です。

CommonMark仕様（2014年）はオリジナルのMarkdownの多くの曖昧さに対処しました。CommonMarkはエッジケースの処理方法を正確に定義し、ほとんどのモダンパーサーはこれを実装しています。GitHub Flavored Markdown（GFM）はテーブル、タスクリスト、取り消し線、自動リンクURL、構文ハイライト付きフェンスドコードブロックでCommonMarkを拡張しています。

GFMはREADMEファイル、プルリクエストの説明、Issueコメント、ドキュメントサイトのデファクトスタンダードです。ほとんどのドキュメントプラットフォーム（Notion、Docusaurus、MkDocs、GitBook）はGFMまたはそのスーパーセットをサポートしています。

フロントマターはMarkdownファイルに構造化メタデータを追加するための一般的な慣例です。ファイルの先頭にある---行で区切られたYAMLブロックには、静的サイトジェネレーター（Astro、Hugo、Jekyll、Next.js）がナビゲーションとページレイアウトを構築するために使用するタイトル、日付、著者、タグを含められます。

実際には「Markdown」はほぼ常にCommonMarkまたはGFMを指します。オリジナルのMarkdown仕様は多くのエッジケースを未定義のまま残し、CommonMarkは厳密な仕様でそれらの曖昧さを解決しました。GFMはテーブル、タスクリスト、取り消し線、自動リンクURLでCommonMarkを拡張しています。Markdownパーサーやレンダラーを評価する際、CommonMarkへの準拠をチェックすることがエッジケースの処理品質の信頼できる指標です。

GFMのテーブルはパイプ（|）で列を区切り、ヘッダー区切り行にハイフン（-）を使用します。列の配置は区切り行のコロンで制御します: :---は左揃え、:---:は中央揃え、---:は右揃え。テーブルはGFM拡張であり、オリジナルのMarkdown構文の一部ではありません。ファイルの最初に---行で区切られるフロントマターは、静的サイトジェネレーターがタイトル、日付、レイアウト、タグなどのページメタデータに使用するYAMLメタデータブロックです。GitHubはフロントマターをファイルの先頭にテーブルとしてレンダリングしますが、すべてのレンダラーがこれを処理するわけではありません。

フェンスドコードブロックはトリプルバッククォートの後にオプションの言語識別子を付けて使用します。例えば、トリプルバッククォートの後に"javascript"と書くと、構文ハイライト付きのJavaScriptブロックが開始されます。利用可能な言語識別子はレンダリングプラットフォームによって異なります。コードを4スペースでインデントしてもコードブロックが作成されますが、ハイライト用の言語を指定する機能はありません。

← すべてのツールに戻る