Markdown®基本：構文、使用法、例[ステップバイステップ]

概要概要

いくつかのバリエーションはありますが、ほとんどのアプリケーションはMarkdownの基本要素をサポートしています。これらの要素は、ドキュメントをフォーマットできるようにするために不可欠です。しかし、間違いなく、Markdownの基本だけを使用して、Web用に適切に設計されたWebサイトを作成することができます。

注：可能な場合は常に、あるMarkdownプロセッサから別のプロセッサへの構文のバリエーションがある場合、これらは記事に記載されます。

タイトル

すべてのドキュメントにタイトルが付いている、またはあるべきですよね？それでは、それから始めましょう。

Markdownでタイトルをフォーマットするために使用される記号は、単語タグ＃です。タイトルを作成するときは、行の先頭にハッシュを配置し、ヘッダーを区切ってコードをフォーマットします。

例えば：

# レベル1タイトル

自分で試してみてください

HTMLからtag h1に変換されます。

<h1>レベル1タイトル</h1>.

MarkdownのタイトルH1をHTMLに変換

注：tag h1は、HTMLの最も重要なタイトル、通常は記事のタイトルを表します。

行の先頭で使用するハッシュの数はタイトルのレベルを示しているため、### Mytitleという形式でレベル3の見出しが作成されます。

注：レベルについて話すときは、HTMLに変換されたタイトルについて話します。 HTMLでは、タイトルレベルの範囲は1〜6で、tags h1、h2、h3、h4、h5、h6

例

Markdown

# レベル1タイトル

自分で試してみてください

HTML

<h1>レベル1タイトル</h1>

結果

レベル1タイトル

Markdown

## レベル2のタイトル

自分で試してみてください

HTML

<h2>レベル2のタイトル</h2>

結果

レベル2のタイトル

Markdown

### レベル3のタイトル

自分で試してみてください

HTML

<h3>レベル3のタイトル</h3>

結果

レベル3のタイトル

Markdown

#### レベル4のタイトル

自分で試してみてください

HTML

<h4>レベル4のタイトル</h4>

結果

レベル4のタイトル

Markdown

##### レベル5のタイトル

自分で試してみてください

HTML

<h5>レベル5のタイトル</h5>

結果

レベル5のタイトル

Markdown

###### レベル6のタイトル

自分で試してみてください

HTML

<h6>レベル6のタイトル</h6>

結果

レベル6のタイトル

トリアル-StackEditのMarkdownタイトル

代替構文

Markdownは、レベル1と2の見出しを作成するための異なる構文を提供します。行の先頭にハッシュを使用する代わりに、レベル1の見出しの下に等号==を追加し、レベルにマイナス記号-を追加します。 2つのヘッダー。

レベル1およびレベル見出しを作成するための代替構文

例

Markdown

レベル1タイトル
===============

自分で試してみてください

HTML

<h1>レベル1タイトル</h1>

結果

レベル1タイトル

Markdown

レベル2のタイトル
---------------

自分で試してみてください

HTML

<h2>レベル1タイトル</h2>

結果

レベル2のタイトル

一部のMarkdownエディターでは、テキストの下に等号=またはダッシュ-のみを使用できますが、これにより、この構文と互換性のない他のエディターでフォーマットの問題が発生する可能性があります。

1つの記号のみを使用する見出しの代替構文

タイトル：ベストプラクティス

行頭のハッシュ記号＃とタイトルテキストの間のスペースについて話すと、互換性の問題が発生する可能性があります。

ドキュメントをより読みやすくすることに加えて、それらの間に少なくとも1つのスペースを追加することを常にお勧めします。それでも、Markdownアプリケーション間でより多くの編集サポートを利用できます。

表1.3は、タイトルの正しい構成を例示しています。

正しい	推奨されません
# 私の記事のタイトル	#私の記事のタイトル

表1.3-Markdownで見出し/見出しを作成する際の正しい使用法。

Markdownで正しい方法でタイトルを作成する

段落

Markdownの最も単純なフォーマットは、段落のフォーマットです。 1つを作成するには、テキストを空白行で区切って、Markdownプロセッサが段落として解釈する断片化を作成します。

Markdownの段落

例

Markdown

Markdownは、すべてのプログラマーにとって重要です。

Markdownを学ぶことは、キャリアを成功させるために不可欠です。

自分で試してみてください

HTML

<p>Markdownは、すべてのプログラマーにとって重要です。</p>

<p>Markdownを学ぶことは、キャリアを成功させるために不可欠です。<p>

結果

Markdownは、すべてのプログラマーにとって重要です。

Markdownを学ぶことは、キャリアを成功させるために不可欠です。

段落：ベストプラクティス

通常、段落は行の先頭に固定されます。つまり、空白やタブなど、あらゆる種類のスペースを使用して段落をインデントすることは避けてください。

注：段落がリスト内にある場合は、段落をインデントする必要があります。

表1.5は、段落を作成するための正しい使用法を例示しています。

正しい	推奨されません
段落の前に空白やタブを使用しないでください。段落は左揃えにする必要があります。	これらのスペースは、Markdownアプリケーションによってはフォーマットの問題を引き起こす可能性があります。どちらの集計もお勧めしません。

表1.5-Markdownで段落を作成するときに行うことと行わないこと。

改行

HTMLでは、改行はtag brで表されます。

HTMLの改行

Markdownで改行を生成するには、行の終わりに2つ以上の空白スペースを挿入し、Enterキーを押します。

例

Markdown

ドキュメントの最初の行。
ドキュメントの2行目。

自分で試してみてください

HTML

<p>ドキュメントの最初の行。<br>

ドキュメントの2行目。</p>

結果

ドキュメントの最初の行。
ドキュメントの2行目。

改行：ベストプラクティス

ほとんどのアプリケーションと互換性がありますが、空白を使用して改行を作成すると、フォーマットの問題が発生する可能性があります。

ここにいくつかのポイントがあります：

行の後の空白は気づきにくいです。
習慣や不注意により、行末に空白を追加することができます。
Sublime Textなどの一部のテキストエディタには、ドキュメントを保存するときに行の前後の空白を削除する設定があります。

改行の問題を回避するための実行可能な代替手段として、ドキュメントで直接tag HTML brを使用するだけです。

注：ほとんどのMarkdownアプリケーションはHTMLのtagsとも互換性があることを覚えておくことは興味深いです。つまり、同じドキュメント内でMarkdownフォーマットとHTMLフォーマットをマージできます。

注：一部のアプリケーションでは、Enterキーを押すだけで改行を作成できます。

注：CommonMarkなどのMarkdownのバリエーションは、バックスラッシュ\の使用を改行のインジケーターとして解釈します。

Enterキーを押すか、バックスラッシュ\を使用することは有効ですが、互換性はMarkdownプログラムに依存するため、お勧めしません。

表1.7は、改行を作成するための正しい構文を示しています。

正しい	推奨されません
行の後の2つのスペース。改行が挿入されました。 HTMLタグを使用して行を分割します。`<br>` 改行が挿入されました。	バックスラッシュを使用して行を区切ります。\ 改行が挿入されました。 Enterキーを押すだけで改行します。`Enter` 改行が挿入されました。

表1.7-Markdownで改行を生成する正しい方法。

強調

Microsoft WordなどのWYSIWYGエディターと同様に、Markdownもテキストを強調するためのフォーマットを提供します。

Microsoft Wordでの強調フォーマット

最も一般的な強調形式には、太字と斜体があり、Markdown構文を使用して適用することもできます。

Markdownで太字

Markdownで太字のテキストをフォーマットするには、コンテンツの前に2つのアスタリスク**を配置し、コンテンツの後に2つのアスタリスク**を配置します。

Markdownで太字

例

Markdown

**This part of the text** will be bold.

自分で試してみてください

HTML

<strong>This part of the text</strong> will be bold.

結果

This part of the text will be bold.

Markdown

__This part of the text__ will be bold.

自分で試してみてください

HTML

<strong>This part of the text</strong> will be bold.

結果

This part of the text will be bold.

Markdown

Markdown**Is**Easy**To**Learn

自分で試してみてください

HTML

Markdown<strong>Is</strong>Easy<strong>To</strong>Learn

結果

MarkdownIsEasyToLearn

注：上記の例に示すように、コンテンツの前後に2つのアンダースコア__を使用すると、アスタリスクをアンダースコアに置き換えることができます。また、Markdownではテキストが太字でフォーマットされます。

太字：ベストプラクティス

2つのアスタリスクと2つのアンダースコアの両方を使用すると、コンテンツに太字の書式を適用できます。

ただし、単語の途中でアンダースコアを使用すると、Markdownプロセッサによってはフォーマットの問題が発生する可能性があるため、アスタリスクを使用することをお勧めします。

表1.9は、太字のフォーマットの推奨される使用法を示しています。

正しい	推奨されません
markdownissimple	markdown__is__simple

表1.9-Markdownで太字でフォーマットするための推奨構文。

コンテンツの途中で太字

Markdownのイタリック

太字と同様に、Markdownの斜体フォーマットでも、アスタリスク*またはアンダースコア_が使用されますが、斜体の場合は、コンテンツの前にアスタリスク*を使用します。コンテンツの後のアスタリスク*。

Markdownのイタリックフォーマットの構文

例

Markdown

*This part of the text* will be in italics.

自分で試してみてください

HTML

<em>This part of the text</em> will be in italics.

結果

This part of the text will be in italics.

Markdown

_This part of the text_ will be in italics.

自分で試してみてください

HTML

<em>This part of the text</em> will be in italics.

結果

This part of the text will be in italics.

Markdown

Markdown*Is*Easy*To*Learn

自分で試してみてください

HTML

Markdown<em>Is</em>Easy<em>To</em>Learn

結果

MarkdownIsEasyToLearn

Markdownの単語の途中をイタリック体にするには、コンテンツの前後にアスタリスクを使用します。

例：

Mar*kdo*wn

自分で試してみてください

イタリック：ベストプラクティス

単語の途中でイタリックを使用する場合は、常にアスタリスク*を使用してください。これにより、Markdownプロセッサとの互換性の問題が回避されます。

表1.11は、イタリック体のコンテンツを強調するために推奨されるマークアップを示しています。

正しい	推奨されません
markdownissimple	markdown_is_simple

表1.11-イタリックを使用して単語の一部を強調するための推奨フォーマット。

Markdownのイタリック-単語の中央をフォーマットします。

太字と斜体

Markdownの太字と斜体

太字のみですか、それとも斜体のみですか？必要に応じて、2つの形式を組み合わせて、任意のコンテンツを強調表示できます。

太字と斜体を同時に適用するには、強調表示するテキストの前後に3つのアスタリスク***または3つのアンダースコア___を追加します。

両方の形式で単語の途中を強調する場合は、アスタリスク（この場合は3つのアスタリスク***）の使用を優先します。

例

Markdown

***This part of the text*** will be bold and italicized.

自分で試してみてください

HTML

<strong><em>This part of the text</em></strong> will be bold and italicized.

結果

This part of the text will be bold and italicized.

Markdown

This is really ___important___.

自分で試してみてください

HTML

This is really <strong><em>important</em></strong>.

結果

This is really important.

Markdown

This is really __*important*__.

自分で試してみてください

HTML

This is really <strong><em>important</em></strong>.

結果

This is really important.

Markdown

This is really **_important_**.

自分で試してみてください

HTML

This is really <strong><em>important</em></strong>.

結果

This is really important.

Markdown

This text is ***really*** important.

自分で試してみてください

HTML

This text is <strong><em>really</em></strong> important.

結果

This text is really important.

太字と斜体：ベストプラクティス

Markdownアプリケーションとの互換性の問題を回避するために、単語の途中を強調表示する場合は、太字と斜体を組み合わせて、3つのアスタリスクの使用を優先します。

Markdownに太字と斜体を適用するための推奨構文。

表1.13は、両方のフォーマットを組み合わせるための指示された使用法を示しています。

正しい	推奨されません
Text*Really*Important.	Text___Really___Important.

表1.13-太字と斜体を組み合わせるためのMarkdownフォーマットの推奨される使用法。

Blockquote

Markdownでコンテンツをブロック引用符としてマークするには、段落の先頭で>より大きいを使用します。

MarkdownのBlockquote。

たとえば、次のMarkdownタグ：

> ブロッククォートの内容。

自分で試してみてください

この出力は、HTMLになります。

ブロッククォートの内容。

複数の段落を持つBlockquote

複数の段落を含むブロッククォートが必要な場合は、これらの各段落の前に大なり記号>を使用し、大なり記号のみを含む行で区切ります。

複数の段落を持つBlockquote

注：Markdownプロセッサがマークアップを正しく解釈できるように、段落を区切る行に大なり記号>を配置する必要があります。

例を見てみましょう：

> ブロッククォートの最初の段落。
>
> ブロッククォートの2番目の段落。

自分で試してみてください

HTMLの出力：

ブロッククォートの最初の段落。

ブロッククォートの2番目の段落。

Blockquotesネスト

ブロッククォート内にいくつかの段落を挿入することに加えて、それらをネストすることもできます。つまり、blockquotes内にblockquotesを挿入します。簡単にしましょう。

ネストされたブロックを作成するには、段落の前に2つの大なり記号>>を使用します。

例：

> ブロッククォートの内容。
>
>> この段落は、ネストされたブロック引用符として解釈されます。

自分で試してみてください

HTMLでのレンダリング：

ブロッククォートの内容。

この段落は、ネストされたブロック引用符として解釈されます。

他の要素とBlockquote

blockquotesの汎用性により、他のMarkdown要素をその中に挿入できます。

注：一部のMarkdown要素は、ブロッククォート内に配置すると正しくレンダリングされない場合があります。これは、Markdownプロセッサ間で大きく異なります。

> #### ブロック内のタイトルh4
>
> - ブロッククォート内のリストの最初の要素。
> - ブロッククォート内のリストの2番目の要素。
>
>  *斜体のテキスト* 書式設定なしの段落の一部 **太字**.

自分で試してみてください

HTMLの出力：

ブロック内のタイトルh4

ブロッククォート内のリストの最初の要素。

ブロッククォート内のリストの2番目の要素。

太字のテキストをフォーマットしない段落の斜体のテキスト部分。

リスト

リストは、ドキュメント内のトピックを整理するために不可欠です。リストは、相互に関連している可能性のある要素の視覚化を容易にします。

Markdownでリストを作成するには、順序付きリストに番号を使用します。つまり、順序付きリストには番号を使用し、ダッシュ-、プラス記号+、または順序なしリストにはアスタリスク*を使用します。

注文リスト

リストの要素を並べ替えることから始めましょう。そのために、番号の後にピリオドと要素のテキストを続けます。

要素の番号は番号の昇順である必要はありませんが、リストの最初の要素は番号1 1で始まる必要があることに注意してください。

注：インデントされた要素を作成するには、要素をマークする番号の前にタブを挿入します。一部のMarkdownプロセッサでは、番号付けの前に3つのスペースを挿入することもできます。結果は似ていますが、疑わしい場合はTABを使用すると、アプリケーションによって異なります。

例

Markdown

1. 最初の要素
2. 2番目の要素
3. 3番目の要素
4. 4番目の要素

自分で試してみてください

HTML

<ol>
    <li>最初の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
    <li>4番目の要素</li>
</ol>

結果

最初の要素
2番目の要素
3番目の要素
4番目の要素

Markdown

1. 最初の要素
1. 2番目の要素
1. 3番目の要素
1. 4番目の要素

自分で試してみてください

HTML

<ol>
    <li>最初の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
    <li>4番目の要素</li>
</ol>

結果

最初の要素
2番目の要素
3番目の要素
4番目の要素

Markdown

1. 最初の要素
8. 2番目の要素
3. 3番目の要素
5. 4番目の要素

自分で試してみてください

HTML

<ol>
    <li>最初の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
    <li>4番目の要素</li>
</ol>

結果

最初の要素
2番目の要素
3番目の要素
4番目の要素

Markdown

1. 最初の要素
2. 2番目の要素
3. 3番目の要素
    1. インデントされた要素
    2. インデントされた要素
4. 4番目の要素

自分で試してみてください

HTML

<ol>
    <li>最初の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素
    <ol>
        <li>インデントされた要素</li>
        <li>インデントされた要素</li>
    </ol>
    </li>
    <li>4番目の要素</li>
</ol>

結果

最初の要素
2番目の要素
3番目の要素
1. インデントされた要素
2. インデントされた要素
4番目の要素

順序付けられていないリスト

順序付けられていないリストは、通常、要素の左側にある記号で示される要素のシーケンスです。つまり、ここには数値シーケンスはありません。

順序付けられていないリストを作成するためのMarkdownマークアップは、プラス記号+、ダッシュ-、またはアスタリスク*です。

これらの2つの記号のいずれかをリスト項目の前に配置して境界を定め、その後に空白スペースと要素のコンテンツを配置します。

注：要素がマークされる前にタブを挿入して、リスト内の要素をインデントします。

例

Markdown

- 最初の要素
- 2番目の要素
- 3番目の要素
- 4番目の要素

自分で試してみてください

HTML

<ul>
    <li>最初の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
    <li>4番目の要素</li>
</ul>

結果

最初の要素
2番目の要素
3番目の要素
4番目の要素

Markdown

* 最初の要素
* 2番目の要素
* 3番目の要素
* 4番目の要素

自分で試してみてください

HTML

<ul>

    <li>最初の要素</li>

    <li>2番目の要素</li>

    <li>3番目の要素</li>

    <li>4番目の要素</li>

</ul>

結果

最初の要素
2番目の要素
3番目の要素
4番目の要素

Markdown

+ 最初の要素
* 2番目の要素
- 3番目の要素
+ 4番目の要素

自分で試してみてください

HTML

<ul>

    <li>最初の要素</li>

    <li>2番目の要素</li>

    <li>3番目の要素</li>

    <li>4番目の要素</li>

</ul>

結果

最初の要素
2番目の要素
3番目の要素
4番目の要素

Markdown

- 最初の要素
- 2番目の要素
- 3番目の要素
    - インデントされた要素
    - インデントされた要素
- 4番目の要素

自分で試してみてください

HTML

<ul>
    <li>最初の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素
    <ul>
        <li>インデントされた要素</li>
        <li>インデントされた要素</li>
    </ul>
    </li>
    <li>4番目の要素</li>
</ul>

結果

最初の要素
2番目の要素
3番目の要素
- インデんトされたた
- インデントされた要素
4番目の要素

要素の追加

Markdownを使用すると、リストの連続性を損なうことなく、リストの中央に他の要素を挿入できます。

リストのフォーマットを保持するには、異なる要素を4つのスペースまたはタブでインデントします。

段落

* これはリストの最初の要素です。
* これはリストの2番目の要素です。
    リスト文字列を壊さずに追加された段落。
* そして最後にリストの3番目の項目。

自分で試してみてください

結果は次のようになります。

これはリストの最初の要素です。
これはリストの2番目の要素です。
リスト文字列を壊さずに追加された段落。
そして最後にリストの3番目の項目。

リスト内のBlockquote

* これはリストの最初の要素です。
* これはリストの2番目の要素です。

    > リストの中央にあるBlockquote。

* そして最後にリストの3番目の項目。

自分で試してみてください

結果は次のようになります。

これはリストの最初の要素です。
これはリストの2番目の要素です。

リストの中央にあるBlockquote。
そして、これがリストの3番目の項目です。

コードブロック

リスト内にコードのブロックを挿入するときは、8つのスペースまたは2つのタブをインデントします。

以下は、コードブロックが含まれているリストの例です。

1. まず、index.htmlファイルを開きます。
2. 以下に示すコードブロックを見つけます。

        <html>
            <head>
            <title>私のウェブサイトのタイトル</title>
        </head>

3. ページタイトルを変更します。

自分で試してみてください

結果は次のようになります。

まず、index.htmlファイルを開きます。

以下に示すコードブロックを見つけます。

<html>
    <head>
    <title>私のウェブサイトのタイトル</title>
</head>

ページタイトルを変更します。

要素間にコードブロックを挿入しても、リストの番号順は変更されていないことに注意してください。

画像

1. まず、Markdownロゴファイルを開きます。
2. 画面のMarkdownロゴを参照してください。

    ![Markdownロゴ](https://markdown.net.br/assets/img/basic-syntax/markdown-logo-small.png)

3. これでファイルを閉じることができます。

自分で試してみてください

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

まず、Markdownロゴファイルを開きます。
画面のMarkdownロゴを参照してください。
これでファイルを閉じることができます。

コード

Markdownを使用すると、逆引用符`を使用してコンテンツの一部をコードとして区別できます。 Markdownプロセッサによってコードとして解釈されるテキストの前後にバッククォートを配置します。

例:

Markdown

`コード`.

自分で試してみてください

HTML

<code>コード.</code>

結果

コード

バックボーンのエスケープ

次のような状況が発生する可能性があります。

コードフォーマットを適用する予定のコンテンツには、すでに逆引用符が含まれています。または、バッククォートを使用してコード自体内のテキストの一部を強調表示する場合。

翻訳するには、引用符をMarkdownマークアップとして解釈せずに、コード境界内に引用符を配置する必要があります。

解決策は単純で、コードの一部を囲む最初と最後のバックを複製します。

例

Markdown

``コードマークアップ内で `crase`を使用します。``

自分で試してみてください

HTML

<code>コードマークアップ内で `crase`を使用します。</code>

結果

コードマークアップ内で `crase`を使用します。

コードブロック

Markdownを使用すると、4つのスペースまたはタブをインデントすることでコードのブロックを作成できます。

次の例を参照してください。

    <html>
        <head>
        </head>
    </html>

自分で試してみてください

結果：

<html>
    <head>
    </head>
</html>

Markdownの拡張構文を使用すると、スペースをインデントせずにコードのブロックを作成できます。このために、囲まれたコードブロックタグを使用する必要があります。

水平線

連続する3つのアスタリスク***、または3つのダッシュ---、または3つのアンダースコア___は、水平線を作成します。

Markdownプロセッサが水平線を正しく解釈するには、行にこれらの文字のみが含まれている必要があります。

***

---

_________________

自分で試してみてください

いずれかの文字を使用すると、結果は同じになります。以下を参照してください。

注：行を作成するために最大文字数を指定する必要はありません。3つ以上を使用し、行にこれらの文字しか含まれていない限り、必要な数だけ入力できます。

水平線：ベストプラクティス

水平線マークの前後には必ず空白行を追加してください。これは、タイトルを作成するための代替構文のために必要です。コンテンツのある行のすぐ下に3つのダッシュ---を置くと、これはレベル2のタイトルとして解釈されます。

表1.18は、正しい方法での水平線の作成を例示しています。

正しい	推奨されません
水平線を作成する前に、必ず空白行を配置してください。 --- 水平線を作成した後、空白行を追加します。	横線の前に空白行を入れないと、このコンテンツはレベル2のタイトルとして解釈されます。 --- 水平線の後の空白行はどこにありますか？

表1.18-Markdownで水平線を作成する正しい方法。

Links

Linksは、ドキュメントの各部分の間にリンクを作成するために使用されます。 WebまたはPDFファイルのページを作成する場合、linksを挿入できることは、これらのタイプのドキュメントを編集するために不可欠な機能の1つです。

Markdownでlinksを作成するための基本的な構文は次のとおりです。

linkを表すテキストを角かっこで囲みます。例：
[世界最高のMarkdownサイト].
次に、URLとも呼ばれるlinkのアドレスを括弧で囲む必要があります。例：
(https://ja.markdown.net.br)

すべてを一緒に入れて。

訪問 [世界最高のMarkdownサイト](https://ja.markdown.net.br).

自分で試してみてください

そして、HTMLの出力。

世界最高のMarkdownサイトにアクセスしてください

タイトルの追加

HTMLの使用経験が少ない場合は、ユーザーがmouseをページのlinkに配置すると、通常、linkの目的を説明する小さなラベルがユーザーに表示されることをご存知でしょう。

このラベルはlinkのタイトルであり、Markdownを使用して作成するには、URLの後に引用符で囲んだテキストを括弧内に追加するだけです。

例:

訪問 [世界最高のMarkdownサイト](https://ja.markdown.net.br "Markdownの最も信頼のおけるリファレンス。").

自分で試してみてください

HTMLで終了し、mouseをlinkに配置して、タイトルが表示されるのを確認します。

訪問世界最高のMarkdownサイト

URLsおよびemailアドレス

また、URLを<未満と>より大きい間に配置することにより、URLを自動的にリンクに変換することもできます。

<https://ja.markdown.net.br>
<email@host.com>

自分で試してみてください

結果は次のようになります。

https://ja.markdown.net.br
email@host.com

linksを強調する

link形式の前後、つまり括弧の前と括弧の後にアスタリスクを追加することにより、そのlinkを強調する必要があることをMarkdownプロセッサーに示します。

例えば：

サイトを訪れる: *[Markdownリファレンス](https://ja.markdown.net.br)*.
検索エンジンをお勧めします: **[Duck Duck GO](https://duckduckgo.com/)**.

自分で試してみてください

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

サイトを訪れる: Markdownリファレンス
私は検索エンジンをお勧めします： Duck Duck GO.

コードフォーマットを使用して、linkを強調表示することもできます。

例:

セクションを確認する: [`コード`](#code).

自分で試してみてください

結果：

セクションを確認します。 コード

参照スタイルLinks

Markdownは、linksを作成するための代替構文を提供し、ドキュメントをよりきれいに表示できるようにします。

この構文を使用すると、1つの参照だけで段落の中央にlinkに変換されるテキストを配置できます。ドキュメントの最後に、以前と同じ参照を使用してすべてのlinksを追加します。

注：link参照はドキュメントのどこにでも配置できます。組織上の理由から、最後に配置することをお勧めします。

この参照linkの作成は2つの部分に分かれているため、それぞれを分析します。

linkの最初の部分

最初に2セットの角かっこを作成します。最初にlinkのテキスト、つまりページに表示されるテキスト、2番目にlinkのアドレスの参照として機能するラベルを作成します。

[Markdown - Wikipedia][1]

注：角括弧の2番目のペア内にある参照linkラベルは、任意、数字、単語、フレーズにすることができ、句読点を含めることもできます。linkへの参照がドキュメントの終わりは同じです。

例：

[Markdown - Wikipedia][wiki_markdown.1]
[ジョン・グルーバーの公式ウェブサイト][JOHN GRUBER]

注：参照ラベルでも大文字と小文字は区別されません。つまり、wiki_markdownはWIKI_MARKDOWNと同じです。

linkの2番目の部分

2番目の部分は、そのlinkが指す場所、つまりlinkのURLを示します。

linkの2番目の部分を組み立てるには、次のものが必要です。

ドキュメントの前半で作成した有効なlink参照ラベルを角かっこで囲み、その後にコロンと少なくとも1つの空白スペースを続けます（たとえば、[label]：）。
リンクアドレス。オプションで、このURLは<未満から>を超えることができます。
引用符""、単一引用符''、または()括弧の間のリンクタイトルは、もちろんオプションです。

以下のすべての例は、2番目の部分のフォーマットに有効です。

[1]: https://en.wikipedia.org/wiki/Markdown
[1]: https://en.wikipedia.org/wiki/Markdown "Markdown - Wikipedia"
[1]: https://en.wikipedia.org/wiki/Markdown 'Markdown - Wikipedia'
[1]: https://en.wikipedia.org/wiki/Markdown (Markdown - Wikipedia)
[1]: <https://en.wikipedia.org/wiki/Markdown> "Markdown - Wikipedia"
[1]: <https://en.wikipedia.org/wiki/Markdown> 'Markdown - Wikipedia'
[1]: <https://en.wikipedia.org/wiki/Markdown> (Markdown - Wikipedia)

linkのこの2番目の部分は、ドキュメントのどこにでも配置できることを再度強調します。組織上の理由から、ファイルの最後に追加します。

すべてのピースをまとめる

ここでは、links参照を使用すると、ドキュメントMarkdownを読みやすくすることができる状況を紹介します。

その段落でカバーされているコンテンツに関する詳細情報を含む1つ以上のlinksをWebサイトに追加する必要があるとします。

Markdownでは、次のようになります。

詳細については、Markdownからこの記事を参照してください。 [Wikipedia](https://en.wikipedia.org/wiki/Markdown "Markdown - Wikipedia"). または言語ドキュメンテーション： [John Gruber](https://daringfireball.net/projects/markdown/ "オリジナルのMarkdownドキュメント。").

自分で試してみてください

段落自体にlinksを追加すると、特にテキストを読んでいる人がMarkdownを知らない場合に、テキストが読みにくくなる可能性があることに注意してください。

linksは段落のコンテキストにとって重要であるため、それらを削除することはできませんが、linksを参照として使用して、その段落をクリーンアップするより効果的な方法があります。

詳細については、Markdownからこの記事を参照してください。 [Wikipedia][1]. または言語ドキュメンテーション： [John Gruber][2].

[1]: <https://en.wikipedia.org/wiki/Markdown> "Markdown - Wikipedia"
[2]: https://daringfireball.net/projects/markdown/ "オリジナルのMarkdownドキュメント。"

自分で試してみてください

注：リンクの周囲に<より小さく>より大きく配置することはオプションです。

上記の2つの形式は、HTMLで同じ結果になります。

詳細については、Markdownからこの記事を参照してください。 Wikipedia. または言語ドキュメンテーション： John Gruber.

参照Links：ベストプラクティス

場合によっては、URLsで空白が発生することがあります。これは、アプリケーションMarkdownによっては問題になる可能性があります。

フォーマットの異常を回避するには、エンコードされた空白を使用します。 %20.

表1.19は、エンコーディングを使用したURLの空白のフォーマットを示しています。

正しい	推奨されません
[link](https://exemplo.com/my%20page)	[link](https://exemplo.com/my page)

表1.19-URLsでコード化された空白の使用。

画像

イメージを追加するためのMarkdownの構文は次のとおりです。

感嘆符: !.
角括弧内の画像の代替テキスト: []
括弧内の画像の完全なアドレス: ()
引用符で囲まれたオプションのタイトル、まだ括弧内: ( "")

例：

![Markdownは、世界で最も単純なマークアップ言語です。](https://markdown.net.br/assets/img/markdown.jpg "Markdownロゴ")

自分で試してみてください

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

Markdownは、世界で最も単純なマークアップ言語です。

画像とLink

linkのような画像を使用するには：

通常のlink形式を作成します。
テキストを参照するlinkのフォーマットの最初の括弧のペアでは、上記で学習したMarkdown画像フォーマットを使用します。

例：

[![砂漠の古代の石](https://markdown.net.br/assets/img/shiprock.jpg "Shiprock, New Mexico By Beau Rogers")](https://www.flickr.com/photos/beaurogers/31833779864/in/photolist-Qv3rFw-34mt9F-a9Cmfy-5Ha3Zi-9msKdv-o3hgjr-hWpUte-4WMsJ1-KUQ8N-deshUb-vssBD-6CQci6-8AFCiD-zsJWT-nNfsgB-dPDwZJ-bn9JGn-5HtSXY-6CUhAL-a4UTXB-ugPum-KUPSo-fBLNm-6CUmpy-4WMsc9-8a7D3T-83KJev-6CQ2bK-nNusHJ-a78rQH-nw3NvT-7aq2qf-8wwBso-3nNceh-ugSKP-4mh4kh-bbeeqH-a7biME-q3PtTf-brFpgb-cg38zw-bXMZc-nJPELD-f58Lmo-bXMYG-bz8AAi-bxNtNT-bXMYi-bXMY6-bXMYv)

自分で試してみてください

結果：

砂漠の古代の石

エスケープ文字

マークダウン内の文字をエスケープするには、つまり、ドキュメント内で文字通り表現するには、その前に円記号を挿入します。

例：

\* アスタリスクの前の円記号により、Markdownプロセッサは、その行をリストの要素ではなく段落として解釈します。

自分で試してみてください

結果は次のようになります。

*アスタリスクの前の円記号により、Markdownプロセッサは、この行をリストの要素ではなく段落として解釈します。

逃げられるキャラクター

表1.20は、バックスラッシュを使用してMarkdownでエスケープできる文字を示しています: \.

キャラクター	名前
\	バックスラッシュ
`	逆引用符（コードブロック内の逆引用符のエスケープも参照）
*	アスタリスク
_	下線付き
{ }	キー
[ ]	角括弧
( )	括弧
#	ハッシュ
+	プラス
-	マイナス記号
.	スコア
!	エクスクラメーション・マーク
\|	垂直バー（テーブル内の垂直バーのエスケープも参照）

表1.20-バックスラッシュを使用してMarkdownでエスケープできる文字。

HTMLおよびMarkdown

すでにHTMLの経験があるプログラマーは、同じドキュメント内で2つの構文、つまりHTMLとMarkdownを混在させることがあります。

HTMLは、色、場所、サイズなど、ドキュメント内の要素の属性を変更するなどのタスクで役立ちます。

HTMLタグをドキュメントに直接配置します。

**大胆な** <em>イタリック</em>

自分で試してみてください

結果は次のようになります。

大胆な itálico

HTMLおよびMarkdown：ベストプラクティス

すべてのMarkdownプロセッサがHTMLタグと互換性があるわけではなく、場合によっては、これらのタグのサブセットのみをサポートすることに注意することが重要です。

試行錯誤が戦略になる可能性があります。 tagsを使用してコンテンツをフォーマットし、HTMLの出力が期待どおりであるかどうかを確認するか、もちろん、アプリケーションのドキュメントを参照してください。

HTMLのtags行をインデントしないでください。ブランクもタブもインデントしないでください。変換時に要素のフォーマットが妨げられる可能性があります。

ブロック要素の前後に空白行を挿入します。例: <div>, <table>, <pre>, <p>.

HTMLタグのコンテンツ内にMarkdown要素を配置することは避けてください。

以下のコードは、一部のエディターで機能しますが、フォーマットの問題を引き起こす可能性のある構文が混在しています。

<p>イタリック **大胆な**</p>

自分で試してみてください

共有

Twitterで共有する Facebookでシェア Linkedinで共有するメールで共有 Whatsappで共有電報で共有