拡張構文 | Markdown ガイド

概要

オリジナルの Markdown 設計ドキュメントで概説されている基本構文は、日常的に必要な要素の多くを追加しましたが、一部の人々には十分ではありませんでした。そこで拡張構文が登場します。

いくつかの個人や組織が、テーブル、コードブロック、シンタックスハイライト、URL 自動リンク、脚注などの要素を追加することで、基本構文を拡張しました。これらの要素は、基本の Markdown 構文を基盤とする軽量マークアップ言語を使用するか、互換性のある Markdown プロセッサに拡張機能を追加することで有効にできます。

利用可能性

すべての Markdown アプリケーションが拡張構文要素をサポートしているわけではありません。使用しているアプリケーションで使用している軽量マークアップ言語が、使用したい拡張構文要素をサポートしているかどうかを確認する必要があります。サポートしていない場合でも、Markdown プロセッサで拡張機能を有効にできる可能性があります。

軽量マークアップ言語

Markdown のスーパーセットである軽量マークアップ言語がいくつかあります。それらには、基本構文が含まれており、テーブル、コードブロック、シンタックスハイライト、URL 自動リンク、脚注などの追加要素を追加することで、基本構文を基盤としています。最も人気のある Markdown アプリケーションの多くは、次のいずれかの軽量マークアップ言語を使用しています。

Markdown プロセッサ

多数の Markdown プロセッサが利用可能です。その多くでは、拡張構文要素を有効にする拡張機能を追加できます。詳細については、プロセッサのドキュメントを確認してください。

テーブル

テーブルを追加するには、3 つ以上のハイフン (---) を使用して各列の見出しを作成し、パイプ (|) を使用して各列を区切ります。互換性を保つために、行の両端にもパイプを追加する必要があります。

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

レンダリングされた出力は次のようになります。

構文	説明
ヘッダー	タイトル
段落	テキスト

以下に示すように、セルの幅は異なる場合があります。レンダリングされた出力は同じように見えます。

| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |

ヒント: ハイフンとパイプでテーブルを作成するのは面倒な場合があります。プロセスを高速化するには、Markdown Tables Generator または AnyWayData Markdown Export を使用してみてください。グラフィカルインターフェイスを使用してテーブルを作成し、生成された Markdown 形式のテキストをファイルにコピーします。

配置

見出し行内のハイフンの左側、右側、または両側にコロン (:) を追加することで、列内のテキストを左、右、または中央に配置できます。

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

レンダリングされた出力は次のようになります。

構文	説明	テストテキスト
ヘッダー	タイトル	これはここです
段落	テキスト	さらに

テーブル内のテキストの書式設定

テーブル内のテキストの書式を設定できます。たとえば、リンク、コード (バッククォート (`) 内の単語またはフレーズのみで、コードブロックではありません)、および強調を追加できます。

見出し、引用、リスト、水平線、画像、またはほとんどの HTML タグは使用できません。

ヒント: HTML を使用して、テーブルセル内に改行を作成し、リストを追加できます。

テーブル内のパイプ文字のエスケープ

テーブルでパイプ (|) 文字を表示するには、その HTML 文字コード (|) を使用します。

フェンス付きコードブロック

基本的な Markdown 構文では、行を 4 つのスペースまたは 1 つのタブでインデントすることで、コードブロックを作成できます。それが不便な場合は、フェンス付きコードブロックを使用してみてください。Markdown プロセッサまたはエディターに応じて、コードブロックの前後の行に 3 つのバッククォート (```) または 3 つのチルダ (~~~) を使用します。一番良い点は、行をインデントする必要がないことです。

```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

レンダリングされた出力は次のようになります。

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

ヒント: コードブロック内にバッククォートを表示する必要がありますか? エスケープする方法については、このセクションを参照してください。

シンタックスハイライト

多くの Markdown プロセッサは、フェンス付きコードブロックのシンタックスハイライトをサポートしています。この機能により、コードが記述された言語に関係なく、色付きのハイライトを追加できます。シンタックスハイライトを追加するには、フェンス付きコードブロックの前のバッククォートの横に言語を指定します。

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

レンダリングされた出力は次のようになります。

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

脚注

脚注を使用すると、ドキュメントの本文を散らかすことなく、メモや参照を追加できます。脚注を作成すると、脚注参照を追加した場所にリンク付きの上付き文字が表示されます。読者はリンクをクリックして、ページの最下部にある脚注の内容にジャンプできます。

脚注参照を作成するには、キャレットと識別子を角かっこ ([^1]) 内に追加します。識別子は数字または単語にできますが、スペースやタブを含めることはできません。識別子は、脚注参照と脚注自体を関連付けるだけです。出力では、脚注は順番に番号が付けられます。

コロンとテキストを含む角かっこで囲まれた別のキャレットと番号を使用して脚注を追加します ([^1]: My footnote.)。脚注をドキュメントの最後に配置する必要はありません。リスト、引用、テーブルなどの他の要素の中を除いて、どこにでも配置できます。

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

レンダリングされた出力は次のようになります。

ここに簡単な脚注があり、¹ 長い脚注もあります。²

これが最初の脚注です。 ↩
複数段落とコードを含む脚注を次に示します。

段落をインデントして脚注に含めます。

{ 私のコード }

必要なだけ段落を追加してください。 ↩

見出し ID

多くの Markdown プロセッサは、見出しのカスタム ID をサポートしています。一部の Markdown プロセッサは、自動的に追加します。カスタム ID を追加すると、見出しに直接リンクしたり、CSS で変更したりできます。カスタムの見出し ID を追加するには、見出しと同じ行の波かっこでカスタム ID を囲みます。

### My Great Heading {#custom-id}

HTML は次のようになります。

<h3 id="custom-id">My Great Heading</h3>

見出し ID へのリンク

ファイル内のカスタム ID を持つ見出しにリンクするには、番号記号 (#) の後にカスタムの見出し ID を続ける標準リンクを作成します。これらは一般的にアンカーリンクと呼ばれます。

Markdown	HTML	レンダリングされた出力
`[見出し ID](#heading-ids)`	`<a href="#heading-ids">見出し ID</a>`	見出し ID

他の Web サイトは、Web ページの完全な URL にカスタムの見出し ID を追加することで、見出しにリンクできます (例: [見出し ID](https://markdownguide.dokyumento.jp/extended-syntax#heading-ids))。

定義リスト

一部の Markdown プロセッサでは、用語とその対応する定義の定義リストを作成できます。定義リストを作成するには、最初の行に用語を入力します。次の行に、コロン、スペース、および定義を入力します。

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

HTML は次のようになります。

<dl>
  <dt>First Term</dt>
  <dd>This is the definition of the first term.</dd>
  <dt>Second Term</dt>
  <dd>This is one definition of the second term. </dd>
  <dd>This is another definition of the second term.</dd>
</dl>

レンダリングされた出力は次のようになります。

最初の用語: これは、最初の用語の定義です。
2 番目の用語: これは、2 番目の用語の定義の 1 つです。; これは、2 番目の用語の別の定義です。

取り消し線

単語の中央に水平線を引いて、単語を取り消し線で消すことができます。結果は~~このよう~~になります。この機能を使用すると、特定の単語がドキュメントに含めることを意図しない間違いであることを示すことができます。単語を取り消し線で消すには、単語の前後に 2 つのチルダ記号 (~~) を使用します。

~~The world is flat.~~ We now know that the world is round.

レンダリングされた出力は次のようになります。

~~世界は平らです。~~ 今では、世界が丸いことを知っています。

タスクリスト

タスクリスト (チェックリストおよびToDoリストとも呼ばれる) を使用すると、チェックボックス付きの項目のリストを作成できます。タスクリストをサポートする Markdown アプリケーションでは、チェックボックスがコンテンツの横に表示されます。タスクリストを作成するには、タスクリスト項目の前にダッシュ (-) とスペース付きの角かっこ ([ ]) を追加します。チェックボックスを選択するには、角かっこの間に x を追加します ([x])。

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

レンダリングされた出力は次のようになります。

Markdown task list

絵文字

Markdown ファイルに絵文字を追加する方法は 2 つあります。絵文字をコピーして Markdown 形式のテキストに貼り付けるか、絵文字ショートコードを入力します。

絵文字のコピーと貼り付け

ほとんどの場合、Emojipedia などのソースから絵文字をコピーして、ドキュメントに貼り付けることができます。多くの Markdown アプリケーションでは、Markdown 形式のテキストに絵文字が自動的に表示されます。Markdown アプリケーションからエクスポートする HTML および PDF ファイルには、絵文字が表示されるはずです。

ヒント: 静的サイトジェネレーターを使用している場合は、HTML ページを UTF-8 としてエンコードしていることを確認してください。

絵文字ショートコードの使用

一部の Markdown アプリケーションでは、絵文字ショートコードを入力することで絵文字を挿入できます。これらは、コロンで始まり、コロンで終わり、絵文字の名前を含んでいます。

Gone camping! :tent: Be back soon.

That is so funny! :joy:

レンダリングされた出力は次のようになります。

キャンプに行きました！⛺ すぐに戻ってきます。

それはとても面白いです！😂

注: 絵文字ショートコードのリストを使用できますが、絵文字ショートコードはアプリケーションごとに異なることに注意してください。詳細については、Markdown アプリケーションのドキュメントを参照してください。

ハイライト

これは一般的ではありませんが、一部の Markdown プロセッサではテキストをハイライトできます。結果はこのようになります。単語をハイライトするには、単語の前後に 2 つの等号 (==) を使用します。

I need to highlight these ==very important words==.

レンダリングされた出力は次のようになります。

これらの非常に重要な単語をハイライトする必要があります。

または、Markdown アプリケーションが HTML をサポートしている場合は、mark HTML タグを使用できます。

I need to highlight these <mark>very important words</mark>.

下付き文字

これは一般的ではありませんが、一部の Markdown プロセッサでは、下付き文字を使用して、1 つ以上の文字を通常の行よりもわずかに下に配置できます。下付き文字を作成するには、文字の前後に 1 つのチルダ記号 (~) を使用します。

H~2~O

レンダリングされた出力は次のようになります。

H₂O

ヒント: 使用する前に、Markdown アプリケーションでテストしてください。一部の Markdown アプリケーションでは、単語の前後の 1 つのチルダ記号を下付き文字ではなく、取り消し線に使用します。

または、Markdown アプリケーションが HTML をサポートしている場合は、sub HTML タグを使用できます。

H<sub>2</sub>O

上付き文字

これは一般的ではありませんが、一部のMarkdownプロセッサでは、1つ以上の文字を通常のテキスト行より少し上に配置するために上付き文字を使用できます。上付き文字を作成するには、文字の前後にキャレット記号（^）を1つずつ使用します。

X^2^

レンダリングされた出力は次のようになります。

X²

または、MarkdownアプリケーションがHTMLをサポートしている場合は、sup HTMLタグを使用できます。

X<sup>2</sup>

URLの自動リンク

多くのMarkdownプロセッサは、URLを自動的にリンクに変換します。つまり、http://www.example.comと入力すると、角括弧を使用していなくても、Markdownプロセッサは自動的にそれをリンクに変換します。

http://www.example.com

レンダリングされた出力は次のようになります。

http://www.example.com

URLの自動リンクを無効にする

URLを自動的にリンクしたくない場合は、バッククォートでURLをコードとして表記することでリンクを削除できます。

`http://www.example.com`

レンダリングされた出力は次のようになります。

http://www.example.com

Markdownスキルを次のレベルに引き上げましょう。

60ページでMarkdownを学びましょう。初心者と専門家の両方向けに設計されたThe Markdown Guideは、Markdown構文を開始し、マスターするために必要なすべてが揃った包括的なリファレンスです。

書籍を入手する

もっとMarkdownを学びたいですか？

ここで止まらないでください！🚀 GitHubリポジトリをスターし、下のメールアドレスを入力して、新しいMarkdownチュートリアルをメールで受け取ってください。スパムはありません！