Softonic

Markdownチートシート

ステップ 1 / 3 33%

Markdownのトピックを選択

まず1つの例のグループを確認し、その後で完全版のリファレンスを開きます。

Markdownのトピックを選択
次へ

主要なMarkdown構文をカテゴリ別に整理し、コピーできるソースと実際のパーサーによる結果を並べて表示します。CommonMarkの基本（見出し、リスト、強調、リンク、画像、フェンスコード）と、GitHub Flavored Markdownの拡張（表、タスクリスト、取り消し線、通常のURLの自動リンク）を扱います。GitHub、GitLab、Obsidian、静的サイトジェネレーターを使うときの手元の早見表として利用できます。

チートシートの使い方

  1. 1

    カテゴリ別に見る

    見出し、リスト、コード、リンク、テーブル、GFM拡張機能へ移動します。

  2. 2

    ソースと結果を比較する

    各例では、生のMarkdownと実際のGFMパーサーによる出力を並べて表示します。

  3. 3

    スニペットをコピーする

    コピーをタップすると、任意の例のソースを取得できます。

  4. 4

    構文ラベルを確認する

    各例にはCommonMarkまたはGitHub Flavored Markdown（GFM）のラベルが付いています。

見出し

# H1 見出し
## H2 セクション
### H3 サブセクション

Setext形式（テキストの下に===）ではなく、ATX形式（#）を使いましょう。どのパーサーも両方に対応していますが、ATX形式のほうが差分（diff）で読みやすくなります。

強調

*斜体* または _斜体_、**太字** または __太字__、***太字斜体***。GFMでは ~~取り消し線~~ が追加されます。

リスト

順序なしリストには -、*、+ のいずれかを使います（1つを選んで統一しましょう）：

- 1番目
- 2番目
  - ネスト（スペース2つ）

順序付きリストは自動的に番号が振り直されます：

1. 項目
1. 項目
1. 項目

コード

インライン： `code`。言語タグを付けられるフェンスブロック：

```python
def hello(name):
    return f"こんにちは、{name}"
```

古い記法を好む場合は、コードブロックを半角スペース4つでインデントします。

リンクと画像

[リンクテキスト](https://example.com)
[タイトル付きリンク](https://example.com "ツールチップ")
![代替テキスト](/path/to/image.png)

参照スタイルを使うと、長いURLを本文の外に出せます：

[ドキュメント][1] を参照。

[1]: https://example.com/docs

テーブル（GFM）

| Col A | Col B |
|-------|------:|
| a     |     1 |
| b     |    22 |

配置は区切り行のコロンで指定します：:--- は左寄せ、:---: は中央寄せ、---: は右寄せです。

タスクリスト（GFM）

- [x] 完了
- [ ] 未対応

よくある落とし穴

  • 末尾の半角スペース2つで段落内に改行が入ります。スペース1つでは行がつながるだけです。
  • ほとんどのブロック要素（見出し、リスト、コードブロック）の前には空行が必要です。
  • レンダラーがスペースを想定している場合は、リストマーカーをタブでインデントしないでください。半角スペース2つまたは4つでインデントします。
  • バックスラッシュでエスケープすると、記号をそのまま表示できます：\*斜体にしない\*。
  • スマートクォートの扱いはレンダラーによって異なります。GitHubはそのまま残し、Pandocは変換します。

よくある質問

CommonMarkは、見出し、リスト、リンク、任意の情報文字列を付けられるフェンスコードなど、移植性の高い中核仕様を定義します。GFMは表、タスクリスト、取り消し線、通常のURLの自動リンクを追加します。ほかのエディターは一部だけを実装したり、独自の拡張を追加したりします。

Markdownは単一の改行をスペースとして扱います。<br> を入れるには、行末に半角スペース2つを付けるか、GFMでは行末に \ を使います。

ほとんどのパーサーでは可能で、ブロックレベルのHTMLタグはそのまま通過します。一部のレンダラーはサニタイズします（GitHubはインラインスクリプトやイベント属性を除去します）。

CommonMarkには組み込みの目次構文がありません。GitHubは見出しアンカーを作成し、見出しが複数あるファイルではアウトラインを表示します。ほかのプラットフォームには独自の仕組みがあり、MkDocsは拡張を有効にすると [TOC] を利用でき、Docusaurusは見出しからページ目次を生成します。

CommonMarkとGFMのルールは使えます。ただしObsidianは、ウィキリンク（[[ページ名]]）、コールアウト、埋め込みブロックなどObsidian独自の機能を追加しており、それらは本チートシートには含まれていません。

関連ツール

Webpack設定ジェネレーター

素の JavaScript、React、Vue 向けに webpack 5 の webpack.config.js を生成します。TypeScript、Babel、CSS や Sass、画像、HtmlWebpackPlugin、開発サーバー、npm install のコマンドまでそろいます。

OpenAPI 検証ツール

OpenAPI または Swagger のドキュメントを JSON か YAML で貼り付けて、コア構造をチェックします: バージョンフィールド、info オブジェクト、paths を、わかりやすいエラーと警告つきで。

CSSローディングアニメーション生成ツール

純粋なCSSで円形スピナーを作成できます。直径、枠の太さ、アクセントカラー、回転速度を設定し、ライブプレビューを確認して、そのまま使えるCSSをコピー。SVGもJavaScriptも不要です。

CMYK から RGB への変換

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

カラーティントジェネレーター

ベースカラーの明るい色合いを生成します。デザイン システム トークン、背景、ホバー状態を 3 ～ 20 段階でスケールします。

PHPフォーマッター

単純なPHPコードに改行と2または4スペースのインデントを追加します。結果は必ず確認してください。PHPパーサーでもPSR-12準拠ツールでもありません。

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