拡張構文

前書き

John Gruberによって公開されたMarkdownの元の構文は、ドキュメントを編集するためのいくつかの重要な要素を追加しましたが、一部のユーザーは満足していませんでした。

拡張構文は、新しいマーキングを介して新しい要素を追加することにより、この不満を解決しようとします。

表、コードブロック、自動links生成、さらには脚注も、Markdownの基本構文を拡張する例です。

これらの要素は、Markdownプロセッサ用のpluginをインストールするか、言語構文のわずかなバリエーションを使用することでアクティブ化できます。

注：アプリケーションMarkdownがこの記事に示されている要素をすでにサポートしている可能性が高いため、チュートリアルに従って各要素をテストする価値があります。

Markdownのフレーバー

Markdownには、いくつかの異なるフレーバー、つまり基本的な言語構文のバリエーションがあります。

これらのバリエーションは、基本的な構文のサポートに加えて、ドキュメントの編集を充実させる要素を追加します。

Markdownと互換性のあるアプリケーションは、多くの場合、以下に示す言語の1つを使用します。

CommonMark

GitHub-flavored Markdown (GFM)

Markdown Extra

R Markdown

MultiMarkdown

Markdownでテーブルを作成する

Markdownのテーブルを使用して、ユーザーによるデータ比較を表示できます。

Markdownでテーブルを作成するには、ダッシュ-と垂直バー|を使用します。行と列を分離します。

テーブルの最初の行は、ヘッダーを作成する場所であり、その行を3つ以上のダッシュ---で区切って、Markdownプロセッサがフォーマットを理解できるようにします。

列の分離は、プログラマーによってpipeとも呼ばれる垂直バー|を使用して行われます。

以下はテーブルの例です。

| 題名  | 題名   |
| ------- | -------- |
| テキスト   | テキスト    |
| テキスト   | テキスト    |

縦棒|テーブルの端で使用されるのは、純粋に表面的な目的です。つまり、サイドバーなしでテーブルを作成できます。

例：

題名  | 題名
------- | --------
テキスト   | テキスト
テキスト   | テキスト

HTMLでレンダリングされた出力：

Markdownテーブル内のセル幅は、さまざまです。

例：

| 題名 | 題名 |
| --- | ----------- |
| テキスト | テキスト |
| テキスト     | テキスト |

Markdownでテーブルを自動的に生成する

Markdownは、ドキュメントの編集を容易にするためにここにあり、テーブルの作成は少し面倒になる可能性があります。

縦棒とダッシュを使用すると、一部のユーザーが不快に感じる可能性があるため、Markdownでテーブルをフォーマットするプロセスを自動化できるのは興味深いことです。

ステップ1-Markdownエディターをここをクリックして開きます。

ステップ2-自動テーブル生成アイコンをクリックして、オプションパネルを開きます。

ステップ3-オプションパネル：

1. テーブルの行数を入力します。
2. テーブルの列数を設定します。
3. 列内のテキストの配置位置を選択します。
4. クリックして確認し、テーブル構造を生成します。

ステップ4-各セルの値を入力します。

配置

Markdownを使用すると、テーブル列の内容を左、右、または中央に揃えることができます。

Markdownテーブルのコンテンツを左側に揃えるには、ヘッダー行を区切るダッシュ---の前にコロン：を配置します。

例：

| フルーツ  | 野菜 | 野菜 |
| :---    | :----    | :---    |
| カシュー    | クレス   | にんじん |
| 林檎    | ブロッコリー | エンドウ |

HTMLの結果：

注：テーブルの内容はデフォルトですでにその位置に配置されているため、コロンを使用してテキストを左に配置することはオプションです。

Markdownテーブル内でテキストを右揃えにするには、ヘッダー行を区切るダッシュ---の後にコロン：を挿入します。

例：

| フルーツ  | 野菜 | 野菜 |
|    ---: |    ----: |    ---: |
| カシュー    | クレス   | にんじん |
| 林檎    | ブロッコリー | エンドウ |

HTMLの結果：

Markdownテーブルの中央に列の内容を揃えるには、ヘッダー行を区切るダッシュの前後にコロン：を追加します。

例：

| フルーツ  | 野菜 | 野菜 |
|  :---:  |  :----:  |  :---:  |
| カシュー    | クレス   | にんじん |
| 林檎    | ブロッコリー | エンドウ |

HTMLの結果：

これは列内のコンテンツにのみ影響するため、配置フォーマットをマージすることができます。

例：

| フルーツ  | 野菜 | 野菜 |
| :---    |  :----:  |    ---: |
| カシュー    | クレス   | にんじん |
| 林檎    | ブロッコリー | エンドウ |

HTMLの結果：

テーブルのタイトルを区切る行のダッシュ---の配置は、Markdownプロセッサには関係がないことに注意してください。実際に考慮されるのは、コロンの位置です。 ：。

次の例では、ダッシュ---が列の左側に配置され、均等に配置されています。

| フルーツ  | 野菜 | 野菜 |
| :---    | :----:   | ---:    |
| カシュー    | クレス   | にんじん |
| 林檎    | ブロッコリー | エンドウ |

HTMLの結果：

注：テーブルヘッダーの内容も、コロンの位置に従って配置されます。

表のテキストのフォーマット

Markdownのいくつかの基本的な要素をテーブルに挿入できます。

許可される形式には、linksを作成し、コンテンツを太字または斜体で強調し、テキストをコードとして強調表示するものがありますが、オンラインコードのみが受け入れられます。つまり、後ろ引用符`で作成された場合です。

タイトル、コードブロック、ブロッククォート、リスト、水平線、画像、HTMLタグは機能しません。

注：テーブル内に上記の要素の挿入を受け入れるアプリケーションを見つけることもできますが、他のプログラムがサポートしていないため、ドキュメントの移植性が損なわれます。

テーブルの垂直バーのエスケープ

テーブルの列を区切るために、垂直バー|を使用することはすでに学びました。

ここで、セル内のコンテンツと同じ文字を表示する場合は、HTMLエンコーディングを使用する必要があります: |.

ドキュメントを別の形式に変換する場合、コード | 縦棒になります|.

フェンスで囲まれたコードブロック

囲まれたコードブロックを使用すると、4つのスペースやタブで行をインデントせずにコード表現を作成できます。さらに、ブロックが表すプログラミング言語を定義することもできます。これにより、適切な構文を適用できます。ハイライト。

Markdownでフェンスで囲まれたコードブロックを作成するには、コンテンツの前に3つの引用符```を配置し、コンテンツの後に3つの引用符```を配置します。

例：

```
{
  "名前": "Robert",
  "姓": "Salles",
  "年齢": 25
}
```

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

{
  "名前": "Robert",
  "姓": "Salles",
  "年齢": 25
}

注：一部のMarkdownプロセッサでは、バッククォートの代わりにタイル~~~を使用してコードブロックを形成できます。

参照：コードブロック内のバックボーンをエスケープする方法。

構文の強調表示

たとえば、多くのJavaScriptライブラリは、コードのブロックを強調表示するために使用されます: Prism.js & highlight.js.

これらは特定のHTMLタグ（通常はpreタグまたはcodeタグ）を取り、コードブロックのプログラミング言語の構文に基づいて強調表示を適用します。

言語構文は通常、tagのパラメーターclassによって定義されます。次に例を示します。

<code class="lang-markdown"></code>

フレームワークは、lang-markdownクラスを使用して、codeタグ間のコンテンツをMarkdown言語に従って強調表示する必要があることを認識します。

注：ハイライトの適用は自動的に行うこともできます。一部のツールには、パラメーターclassで定義しなくても、プログラミング言語を自動化された方法で検出する機能があります。

Markdownを使用してコードブロックを構築する場合、最初の3つの逆引用符```を開いた直後にプログラミング言語を指定できます。

例：

```json
{
  "名前": "Robert",
  "姓": "Salles",
  "年齢": 25
}
```

ブロックの最初の行と同様に、3つの開始バックボーンjsonが指定された直後に、コードはそれに応じて強調表示されます。

{
  "名前": "Robert",
  "姓": "Salles",
  "年齢": 25
}

注：このタイプのタスクを実行するJavaScriptライブラリを使用する場合にのみコードが強調表示されます。HTML自体はコードを強調表示しません。

脚注

Markdownの脚注を使用すると、ユーザーはドキュメントに記載されている概念への参照を作成できます。

通常、これらの脚注はドキュメントの最後に配置されますが、Markdownではテキストのどこにでも定義できます。

脚注を作成すると、linkの形式の上付き文字番号が作成した場所に挿入され、ユーザーがそのlinkをクリックすると、脚注の参照を含む場所に直接移動します。

脚注を作成するための構文は、2つの部分に分かれています。

最初の部分はlinkを含む番号を表し、角かっこ、キャレット、識別子などを使用して作成されます。: [^1].

識別子には数字や文字を含めることができますが、スペースやタブは使用できません。

2番目の部分では、参照自体の内容について説明します。角かっこ、キャレットの後に同じ識別子（前に作成したもの）、コロン、空白スペース、テキストなどを使用して参照を作成します。: [^1]: 私の脚注.

これが簡単な脚注です[^1]. ここにもっと手の込んだ脚注があります[^bignote].

[^1]: これは最初の脚注です。

[^bignote]: これはいくつかの段落とコードを持つものです。

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

    `{ 私のコード }`

    必要な数の段落を追加します。

HTMLでのレンダリングは次のようになります。

これが簡単な脚注です¹. ここにもっと手の込んだ脚注があります².

注：フッターのコンテンツは、テーブル、リスト、コードブロックなどの他のMarkdown要素内を除いて、ドキュメント内のどこにでも配置できます。

注：作成した識別子に関係なく、脚注には常に順番に番号が付けられ、一連の注[^35]、[^yyyy]、および[^102_444]は1、2、および3としてレンダリングされます。

Markdown要素にIDまたはClassを追加する

HTMLでtagsを作成する場合、パラメータidおよびclassを使用して、一意のIDと一般的なIDを割り当てることができます。

例：

<h2 id="special-title"></h2> & <p class="bg-blue"></p>

idを使用すると、特定の要素の特定の参照を取得できます。通常、要素のidはHTMLタグ内で一意です。

パラメータclassは汎用であり、いくつかの要素に割り当てることができます。

idまたはclassの機能は、このidまたはこのclassを使用して、JavaScriptまたはCSSを介してこれらの要素を簡単に認識できるようにすることです。色、サイズ、配置など。

Markdown内中括弧{の要素にidまたはclassを追加するには、要素のコンテンツの直後にハッシュ記号＃を配置してidまたは。 classを示し、次に識別子自体を示し、最後に中括弧}を閉じます。

例：

### 私のタイトル {#identifier}

私の段落{.my-class}

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

<h3 id="identifier">私のタイトル</h3>

<p class="my-class">私の段落</p>

注：すべてのMarkdownアプリケーションがパラメーターidまたはclassの挿入をサポートしているわけではないことに注意してください。常にプログラムのドキュメントを参照することが重要です。

MarkdownのidsのLinks

links []()を作成するための同じ標準構文を使用して、ドキュメント自体のidへの直接参照をリンクできます。

URLを配置する括弧内に、ハッシュ記号＃が前に付いた要素のidを挿入します。

idが別のドキュメントにある場合、フォーマットは似ていますが、識別する前に、ページURLを配置します。

例：

[ヘッダーID](https://ja.markdown.net.br/extended-syntax#markdown-title-id)

定義のリスト

HTMLの定義のリストは、tags dlおよびdtで表されます。このリストは、用語とその説明を概念的に表しています。

Markdownで定義のリストを作成するには、1行に用語を入力し、キーEnter、コロン、空白スペース、および用語定義を押します。

例：

第一期
: これが最初の用語の定義です。

2期目
: これは第2項の定義です。
: これは、第2項の別の定義です。

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

<dl>
  <dt>第一期</dt>
  <dd>これが最初の用語の定義です.</dd>
  <dt>2期目</dt>
  <dd>これは第2項の定義です。 </dd>
  <dd>これは、第2項の別の定義です。</dd>
</dl>

結果です：

第一期

これが最初の用語の定義です。

2期目

これは第2項の定義です。

これは、第2項の別の定義です。

Markdownでの取り消し線

取り消し線は、エラーを比較的修正するために使用され、通常、同じ行で修正が続きます。

取り消し線は、コンテンツの中央に水平線を挿入する形式にすぎません。

Markdownのコンテンツにタグを付けるには、フォーマットするテキストの前後に2つのタイル~~を使用します。

Markdownは: ~~難しい~~ 習得が容易.

そして結果はこれです：

Markdownは: 難しい 習得が容易.

Markdownのタスクリスト

Markdownのタスクリストを使用すると、ユーザーは角かっこ[]を使用して、左側にチェックボックスが付いた要素のシーケンスを作成できます。

リストを操作しているため、アイテムの行をダッシュ​​-で始める必要があります。

タスクを完了としてマークするには、角かっこ[x]の内側にxを配置します。

- [x] Lorem ipsum dolor sit amet
- [ ] Lorem consectetur adipisicing elit
- [ ] Lorem ut labore et dfolore

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

ドキュメントMarkdownにEmojisを挿入する

はい、有名なemoticonsをドキュメントのMarkdown形式で直接挿入できます。

このタスクで最も一般的に使用される方法は2つあります。絵文字をコピーしてコンテンツに貼り付けるか、絵文字コードを入力します。

両方の手順がどのように機能するかをよりよく理解しますが、最初にここをクリックしてMarkdownエディターを開き、Emojisをリアルタイムでテストします。

MarkdownにEmojisをコピーして貼り付ける

ステップ1-笑顔のemoticonを含むこのEmojipediaページを開き、Copyボタンをクリックします。

ステップ2-Markdownエディターに戻り、左側のパネルをクリックして、CTRL + Vを押して貼り付けます。

注：Emojipediaを探索してお気に入りの絵文字を見つけることができます。コピーと貼り付けの手順はすべて同じです。

Markdownアプリケーションに互換性がある場合は、emoticonの表現がテキストに直接表示されます。

MarkdownドキュメントをHTMLまたはPDFに変換する場合でも、絵文字は正しく表示されます。

注：ドキュメントHTMLが絵文字を適切にレンダリングしていない場合は、ページをUTF-8でエンコードします。

Emojiアクセスコードの使用

絵文字コードは、コロンで囲まれたemoticonを識別することによって形成されます。

私はキャンプに行った！ :tent: 私はすぐに戻ってきます。

これはとても面白いです！ :joy:

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

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

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

Emojisアクセスコードの発見

絵文字のアクセスコードがわからない場合は、Markdownエディターを使用して調べてください。

ステップ1-ここをクリックしてMarkeditorを開きます。

ステップ2-ツールバーのEmojis挿入ボタンをクリックします。

ステップ3-Emoji選択ウィンドウ：

1. Emojisを入手したい場所からソースを選択します。
2. ドキュメントに挿入されるEmojiをクリックします（同じウィンドウで複数のEmojisをクリックできます）。
3. 確認ボタンを押して、画像のアクセスコードをテキストに配置します。

左側のパネルでEmojisコードを表示し、右側のパネルでレンダリングを表示できます。

注：emoticonsの画像はアプリケーションごとに大きく異なる可能性があります。このリストには、GitHubで使用されるMarkdown互換の絵文字があります。アプリケーションでテストして、互換性があるかどうかを確認できます。 。

MarkdownのURLからの自動Link

一部のMarkdownプロセッサは、<未満と>より大きい記号の間のアドレスを見つけると、URLをlinksに変換します。

例：

<https://ja.markdown.net.br>

それ以外の場合は、間にアドレスを埋め込む必要はありません。つまり、ドキュメント自体にURLを挿入するだけで、アプリケーションが自動的に変換します。

例：

https://ja.markdown.net.br

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

https://ja.markdown.net.br

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

ドキュメント内のURLを表すだけで、アプリケーションがURLを自動的にリンクに変換しないようにする場合は、アドレスをバッククォート``で囲みます。

`https://ja.markdown.net.br`

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

https://ja.markdown.net.br

注：コンテンツを囲むためにバッククォートを使用すると、コンテンツがコードに変換されることを覚えておく価値があります。