Markdown記法の概要

Markdown（マークダウン）の書き方と、対応するHTMLの一覧表です。

Markdownの派生型のうち、実質標準といえるCommonMarkの仕様に沿った内容になります。

Markdown記法 対応HTML 説明
CommonMark 
段落のテキスト

段落のテキスト

<p>段落のテキスト</p>

<p>段落のテキスト</p>

【段落：p要素に対応】

空白行で区切られたテキストは、段落として扱われます。

［▼詳細］

 
強制的に\
改行する

強制的に  
改行する

強制的に<br>
改行する

強制的に<br>
改行する

【改行：br要素に対応】

行末に\（バックスラッシュ）を1つ、または行末にスペースを2つ以上入れると、改行として扱われます。スペースだと視覚的に分かりにくいため、\を使用することをおすすめします。

［▼詳細］

 
# レベル1の見出し

## レベル2の見出し

### レベル3の見出し

#### レベル4の見出し

##### レベル5の見出し

###### レベル6の見出し

<h1>レベル1の見出し</h1>

<h2>レベル2の見出し</h2>

<h3>レベル3の見出し</h3>

<h4>レベル4の見出し</h4>

<h5>レベル5の見出し</h5>

<h6>レベル6の見出し</h6>

【見出し：h1-h6要素に対応】

#とスペースに続くテキストは、見出しとして扱われます。#の数（1～6）により見出しのレベルが変わります。

※レベル1とレベル2の見出しは別の書き方もあります。

［▼詳細］

 
> 引用された内容
>
> 引用された内容

<blockquote>
<p>引用された内容</p>
<p>引用された内容</p>
</blockquote>

【ブロック引用：blockquote要素に対応】

>とスペースに続くテキストは、引用された内容として扱われます（スペースは省略可能）。

［▼詳細］

 
- リスト項目
- リスト項目
- リスト項目

<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>

【順不同のリスト：ul要素とli要素に対応】

-（ハイフン）とスペースに続くテキストは、順不同のリスト項目として扱われます。-の代わりに*や+も使用できますが、1つのリスト内で混在させてはなりません。

［▼詳細］

 
1. リスト項目
2. リスト項目
3. リスト項目

<ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>

【順序付きのリスト：ol要素とli要素に対応】

数字と.（ピリオド）とスペースに続くテキストは、順序付きのリスト項目として扱われます。.の代わりに)も使用できますが、1つのリスト内で混在させてはなりません。先頭の項目は任意の番号で始めることができます（start属性に対応）。

［▼詳細］

 
- リスト項目
  1. サブリスト
- リスト項目

10. リスト項目
    - サブリスト
11. リスト項目

<ul>
<li>リスト項目
<ol>
<li>サブリスト</li>
</ol>
</li>
<li>リスト項目</li>
</ul>

<ol>
<li>リスト項目
<ul>
<li>サブリスト</li>
</ul>
</li>
<li>リスト項目</li>
</ol>

【ネストされたリスト】

インデントされたリスト項目は、サブリスト（ネストされたリスト）として扱われます。順不同のリストと順序付きのリストを混在させることもできます。

サブリストは、親リスト項目のテキストの開始位置に合わせてインデントさせます。左記の例では、1つ目のリストでは2スペース分、2つ目のリストでは4スペース分のインデントが行われています。

［▼詳細］

 
[リンクテキスト](URL)

<a href="URL">リンクテキスト</a>

【リンク：a要素に対応】

[ ]内にリンクテキスト、( )内にリンク先のURLを記述します（相対URLも可能）。]と(の間にスペースを入れてはなりません。

※リンクは別の書き方もあります。

［▼詳細］

 
![代替テキスト](URL)

<img src="URL" alt="代替テキスト">

【画像：img要素に対応】

リンクの書き方に似ていますが、画像は!で始まります。[ ]内に代替テキスト、( )内に画像のURLを記述します（相対URLも可能）。]と(の間にスペースを入れてはなりません。代替テキストがない場合でも空の[ ]が必要です。

※画像は別の書き方もあります。

［▼詳細］

 
```
Code String
Code String
Code String
```

<pre><code>Code String
Code String
Code String
</code></pre>

【コードブロック：pre要素とcode要素に対応】

3つ以上並べた```（バッククォート）をコードフェンスと言います。コードフェンスに囲まれた範囲はコードブロックとして扱われ、内容の空白文字（改行や連続したスペース等）はそのまま保持されます。```の代わりに~~~（チルダ）も使用できますが、混在させることはできません。

※コードブロックは別の書き方もあります。

［▼詳細］

 
---

***

___

<hr>

<hr>

<hr>

【テーマの区切り：hr要素に対応】

3つ以上並べられた---（ハイフン）、***（アスタリスク）、___（アンダースコア）は、テーマの区切りとして扱われます。通常、この区切りは水平線で表現されます。

［▼詳細］

 
*強調テキスト*

<em>強調テキスト</em>

【強調テキスト：em要素に対応】

1つの*（アスタリスク）で囲まれたテキストは、強調テキストとして扱われます。*と強調テキストの間にスペースを入れてはなりません。通常、このテキストは斜体で表現されます。

*の代わりに_（アンダースコア）を使用することもできますが、Markdownの構文において使いにくい部分があるため、*を使用することをおすすめします。

［▼詳細］

 
**重要テキスト**

<strong>重要テキスト</strong>

【重要テキスト：strong要素に対応】

2つの**（アスタリスク）で囲まれたテキストは、重要テキストとして扱われます。**と重要テキストの間にスペースを入れてはなりません。通常、このテキストは太字で表現されます。

**の代わりに__（アンダースコア）を使用することもできますが、Markdownの構文において使いにくい部分があるため、**を使用することをおすすめします。

［▼詳細］

 
`Code String`

<code>Code String</code>

【コード範囲：code要素に対応】

1つ以上の`（バッククォート）で囲まれた範囲は、インラインのコードとして扱われます。

［▼詳細］

 
\# 見出しではない

\- リスト項目ではない

\*強調ではない*

# 見出しではない

- リスト項目ではない

*強調ではない*

【バックスラッシュエスケープ】

Markdownの構文で使用される記号を通常の文字として表示したい場合は、直前に\（バックスラッシュ）を入れることでエスケープすることができます。

［▼詳細］

 
<HTML TAG>

【HTMLタグの使用】

Markdownファイル内では、HTMLタグを使用することもできます。Markdownの構文で表現できない内容については、HTMLタグで記述することが可能です。

［▼詳細］

 
<div>

< > &

&copy;

<div>

&lt; &gt; &amp;

&copy;

【特殊文字の扱い】

Markdownファイル内では、< > &といった特殊文字をそのまま記述することができます。HTML出力時には必要に応じて文字参照に変換されます。

［▼詳細］
その他拡張（参考情報） 
|TH |TH |
|---|---|
|TD |TD |
|TD |TD |

<table>
<thead>
<tr>
<th>TH</th>
<th>TH</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
</tr>
</tbody>
</table>

【テーブル】

1行目はヘッダ行、2行目は区切り、3行目以降はデータ行になります。2行目の区切り線は1つの列につき-（ハイフン）が3つ以上必要です。列は|（パイプ）で区切られます。

オプションで、2行目の-に:（コロン）を加えることで、行揃えを指定することもできます。:--または---は左揃え、--:は右揃え、:-:は中央揃えになります。-の数は増やしていくことができます。

Markdownの構文では、シンプルなテーブルにしか対応していません。セルが結合されていたり、セル内の文字数が多い場合は、HTMLのtableを使用することを検討してください。

 
~~取り消し~~

<del>取り消し</del>

【取り消し線】

2つの~~（チルダ）で囲まれたテキストは、取り消し線が引かれます。~~と取り消しテキストの間にスペースを入れてはなりません。

 
脚注[^1]へのリンク

[^1]: 脚注の内容

未確認

【脚注】

詳細は未確認ですが、1つ目の^1はリンクとなり、それをクリックすると[^1]:の位置にジャンプするようです。

Markdownファイルの拡張子は「.md」、MIMEタイプは「text/markdown」になります。

Markdown記法の詳細

Markdown記法の詳細は以下のようになります。

段落

空白行で区切られたテキストは、段落として扱われます。

以下は2つの段落を配置しています。


段落のテキスト

段落のテキスト



<p>段落のテキスト</p>

<p>段落のテキスト</p>

段落内には複数の行を含めることができます。


1行目のテキスト
2行目のテキスト

1行目のテキスト
2行目のテキスト



<p>1行目のテキスト
2行目のテキスト</p>

<p>1行目のテキスト
2行目のテキスト</p>

改行

行末に \（バックスラッシュ）を1つ入れると、改行として扱われます。


強制的に\
改行する



<p>強制的に<br>
改行する</p>

行末に2つ以上のスペースを入れても改行できますが、視覚的には分かりにくくなります。


強制的に  
改行する



<p>強制的に<br>
改行する</p>

コード範囲内では改行されません。


`Code\
String`



<p><code>Code\ String</code></p>

見出し

#とスペースに続くテキストは、見出しとして扱われます。#の数（1～6）により見出しのレベルが変わります。


# レベル1の見出し

## レベル2の見出し

### レベル3の見出し

#### レベル4の見出し

##### レベル5の見出し

###### レベル6の見出し



<h1>レベル1の見出し</h1>

<h2>レベル2の見出し</h2>

<h3>レベル3の見出し</h3>

<h4>レベル4の見出し</h4>

<h5>レベル5の見出し</h5>

<h6>レベル6の見出し</h6>

オプションで、見出しテキストの後に任意の数の#を入れることもできます。見出しテキストと#の間にはスペースが必要です。

見出しのレベルは開始部分の#の数で決まるため、終了部分の#の数はいくつでも構いません。（終了部分の#に意味はなく、単にコードの見た目を整えるために存在します）


# レベル1の見出し ##########



<h1>レベル1の見出し</h1>

レベル1とレベル2の見出しは、以下のように記述することもできます。下線に=が使用されている場合はレベル1、-（ハイフン）が使用されている場合はレベル2の見出しになります。


レベル1の見出し
===============

レベル2の見出し
---------------



<h1>レベル1の見出し</h1>

<h2>レベル2の見出し</h2>

下線の長さは任意のため、以下の場合も見出しとして扱われます。


レベル1の見出し
=

レベル2の見出し
--------------------



<h1>レベル1の見出し</h1>

<h2>レベル2の見出し</h2>

ブロック引用

>とスペースに続くテキストは、引用された内容として扱われます。（スペースは省略可能）

以下は、いずれも1つの段落を引用しています。空白行を入れることでブロックを区切ることができます。


> 引用されたテキスト1

> 引用された
> テキスト2

> 引用された
テキスト3



<blockquote>
<p>引用されたテキスト1</p>
</blockquote>

<blockquote>
<p>引用された
テキスト2</p>
</blockquote>

<blockquote>
<p>引用された
テキスト3</p>
</blockquote>

2つ以上の段落を引用する場合は次のように記述します。


> 1つ目の段落
>
> 2つ目の段落
>
> 3つ目の段落



<blockquote>
<p>1つ目の段落</p>
<p>2つ目の段落</p>
<p>3つ目の段落</p>
</blockquote>

見出しやリストなども引用することができます。


> # レベル1の見出し
>
> 段落のテキスト

> - リストの引用
> - リストの引用
> - リストの引用



<blockquote>
<h1>レベル1の見出し</h1>
<p>段落のテキスト</p>
</blockquote>

<blockquote>
<ul>
<li>リストの引用</li>
<li>リストの引用</li>
<li>リストの引用</li>
</ul>
</blockquote>

引用をネストする場合は次のように記述します。


> 引用されたテキスト
>
> > ネストされた引用
>
> 引用されたテキスト



<blockquote>
<p>引用されたテキスト</p>
<blockquote>
<p>ネストされた引用</p>
</blockquote>
<p>引用されたテキスト</p>
</blockquote>

順不同のリスト

-（ハイフン）とスペースに続くテキストは、順不同のリスト項目として扱われます。-の代わりに*や+も使用できますが、1つのリスト内で混在させてはなりません。


- リスト項目
- リスト項目
- リスト項目

* リスト項目
* リスト項目
* リスト項目

+ リスト項目
+ リスト項目
+ リスト項目



<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>

<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>

<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>

連続する同じタイプのリストを区切りたい場合は、以下のように空のHTMLコメントを挿入します。（コメントを入れないと1つのリストとして解釈されてしまいます）


- リスト項目
- リスト項目
- リスト項目

<!-- -->

- リスト項目
- リスト項目
- リスト項目



<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>

<!-- -->

<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>

順序付きのリスト

数字と.（ピリオド）とスペースに続くテキストは、順序付きのリスト項目として扱われます。.の代わりに)も使用できますが、1つのリスト内で混在させてはなりません。


1. リスト項目
2. リスト項目
3. リスト項目

1) リスト項目
2) リスト項目
3) リスト項目



<ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>

<ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>

先頭の項目は任意の番号で始めることができます。


5. リスト項目
6. リスト項目
7. リスト項目



<ol start="5">
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>

実はHTML的には2項目以降の番号に意味はなく、先頭項目の番号のみが意味を持ちます。以下のように記述したとしても、このリストの番号は「5 → 6 → 7」と続きます。


5. リスト項目
1. リスト項目
1. リスト項目



<ol start="5">
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>

番号はゼロ埋め（例：001）で記述することもできます（最大で9桁まで）。また、開始番号には0を指定することもできます。


005. リスト項目
006. リスト項目
007. リスト項目

0) リスト項目
1) リスト項目
2) リスト項目



<ol start="5">
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>

<ol start="0">
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>

連続する同じタイプのリストを区切りたい場合は、以下のように空のHTMLコメントを挿入します。（コメントを入れないと1つのリストとして解釈されてしまいます）


1. リスト項目
2. リスト項目
3. リスト項目

<!-- -->

1. リスト項目
2. リスト項目
3. リスト項目



<ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>

<!-- -->

<ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>

ネストされたリスト

インデントされたリスト項目は、サブリスト（ネストされたリスト）として扱われます。


- リスト項目
  - サブリスト
  - サブリスト
- リスト項目

1. リスト項目
   1. サブリスト
   2. サブリスト
2. リスト項目



<ul>
<li>リスト項目
<ul>
<li>サブリスト</li>
<li>サブリスト</li>
</ul>
</li>
<li>リスト項目</li>
</ul>

<ol>
<li>リスト項目
<ol>
<li>サブリスト</li>
<li>サブリスト</li>
</ol>
</li>
<li>リスト項目</li>
</ol>

順不同のリストと順序付きのリストを混在させることもできます。


- リスト項目
  1. サブリスト
  2. サブリスト
- リスト項目

1. リスト項目
   -  サブリスト
   -  サブリスト
2. リスト項目



<ul>
<li>リスト項目
<ol>
<li>サブリスト</li>
<li>サブリスト</li>
</ol>
</li>
<li>リスト項目</li>
</ul>

<ol>
<li>リスト項目
<ul>
<li>サブリスト</li>
<li>サブリスト</li>
</ul>
</li>
<li>リスト項目</li>
</ol>

サブリストは、親リスト項目のテキストの開始位置に合わせてインデントさせます。以下の例では、1つ目のリストでは2スペース分、2つ目のリストでは4スペース分のインデントが行われています。

※「4つのスペースでインデントする」と解説されていることが多いですが、CommonMarkの仕様では異なります。4スペースに固定しない理由については、仕様書内の5.2.1Motivation（英語）で説明されています。


- リスト項目
  - サブリスト

10. リスト項目
    1. サブリスト



<ul>
<li>リスト項目
<ul>
<li>サブリスト</li>
</ul>
</li>
</ul>

<ol>
<li>リスト項目
<ol>
<li>サブリスト</li>
</ol>
</li>
</ol>

同様の方法でインデントさせることで、リスト以外のブロックもリスト項目内に配置することができます。以下の例では、1つ目のリストには段落を、2つ目のリストには段落とコードブロックを配置しています。


- リスト項目内の段落

  リスト項目内の段落



1. リスト項目内の段落

   ```
   Code Block
   ```

   リスト項目内の段落



<ul>
<li>
<p>リスト項目内の段落</p>
<p>リスト項目内の段落</p>
</li>
</ul>

<ol>
<li>
<p>リスト項目内の段落</p>
<pre><code>Code Block
</code></pre>
<p>リスト項目内の段落</p>
</li>
</ol>

リンク

リンクを作成する場合は、[ ]内にリンクテキスト、( )内にリンク先のURLを記述します。]と(の間にスペースを入れてはなりません。


[リンクテキスト](https://www.example.com/)



<p><a href="https://www.example.com/">リンクテキスト</a></p>

オプションでタイトル（title属性）を含めることもできます。URLとタイトルの間にはスペースが必要です。


[リンクテキスト](https://www.example.com/ "タイトル")



<p><a href="https://www.example.com/" title="タイトル">リンクテキスト</a></p>

リンク先のURLには相対URLを指定することもできます。以下の2つ目のリンクでは、同一ページ内の特定の位置にリンクしています。


[リンクテキスト1](../test/test.html)

[リンクテキスト2](#test)



<p><a href="../test/test.html">リンクテキスト1</a></p>

<p><a href="#test">リンクテキスト2</a></p>

画像でリンクする場合は、リンクテキストの代わりに画像を埋め込むコードを入れます。


[![代替テキスト](image/test.png)](test.html)



<p><a href="test.html"><img src="image/test.png" alt="代替テキスト"></a></p>

以下のように、別の場所（通常はページの下部）にリンクの定義を用意して、リンクを設定することもできます（任意のIDによって関連付けられます）。リンク定義の:（コロン）とURLの間にはスペースが必要です。

※リンクの定義は、Markdown → HTMLの変換処理中に使用されるもので、HTML出力時にはレンダリングされません。


[リンクテキスト1][ID1]

[リンクテキスト2][ID2]


[ID1]: https://www.example.com/
[ID2]: https://www.example.com/ "タイトル"



<p><a href="https://www.example.com/">リンクテキスト1</a></p>

<p><a href="https://www.example.com/" title="タイトル">リンクテキスト2</a></p>

以下は自動リンクの例です。< >内に絶対URLを記述すると、それがリンクとして扱われます（相対URLは不可）。メールアドレスを記述すると、メールの自動リンクが設定されます（mailto:は自動的に付けられます）。


<https://www.example.com/>

<info@example.com>



<p><a href="https://www.example.com/">https://www.example.com/</a></p>

<p><a href="mailto:info@example.com">info@example.com</a></p>

※上記の他にもリンクの設定方法がありますが、長くなるので省略いたします。

画像

画像を埋め込む場合は、!で始まり、[ ]内に代替テキスト、( )内に画像のURLを記述します。]と(の間にスペースを入れてはなりません。


![代替テキスト](image/test.png)



<p><img src="image/test.png" alt="代替テキスト"></p>

代替テキストがない場合は[ ]の内容を空にします。


![](image/test.png)



<p><img src="image/test.png" alt=""></p>

画像のURLには絶対URLを指定することもできます。


![代替テキスト](https://www.example.com/test.png)



<p><img src="https://www.example.com/test.png" alt="代替テキスト"></p>

オプションでタイトル（title属性）を含めることもできます。URLとタイトルの間にはスペースが必要です。


![代替テキスト](image/test.png "タイトル")



<p><img src="image/test.png" alt="代替テキスト" title="タイトル"></p>

以下のように、別の場所（通常はページの下部）に画像の定義を用意して、画像を埋め込むこともできます（任意のIDによって関連付けられます）。画像定義の:（コロン）とURLの間にはスペースが必要です。

※画像の定義は、Markdown → HTMLの変換処理中に使用されるもので、HTML出力時にはレンダリングされません。


![代替テキスト1][ID1]

![代替テキスト2][ID2]


[ID1]: image/test1.png
[ID2]: image/test2.png "タイトル"



<p><img src="image/test1.png" alt="代替テキスト1"></p>

<p><img src="image/test2.png" alt="代替テキスト2" title="タイトル"></p>

※上記の他にも画像の埋め込み方法がありますが、長くなるので省略いたします。

コードブロック

3つ以上並べた```（バッククォート）をコードフェンスと言います。コードフェンスに囲まれた範囲はコードブロックとして扱われ、内容の空白文字（改行や連続したスペース等）はそのまま保持されます。


```
Code String
Code String
Code String
```



<pre><code>Code String
Code String
Code String
</code></pre>

```の代わりに~~~（チルダ）も使用することができます。（開始コードフェンスと終了コードフェンスの種類は同一である必要があります）


~~~
Code String
Code String
Code String
~~~



<pre><code>Code String
Code String
Code String
</code></pre>

オプションで、開始コードフェンスに続けて情報文字列を入れることもできます。通常、情報文字列の最初の単語は、コードブロック内の言語名を示すために使用されます。この言語名は、HTML出力時に「language-言語名」といったクラス名に変換され、codeタグに追加されます。

開始コードフェンスと情報文字列の間のスペースは省略することもできます。


``` js
'use strict';

console.log('Hello World');

// end
```



<pre><code class="language-js">'use strict';

console.log('Hello World');

// end
</code></pre>

コードブロック内の文字は、Markdownとして解析されません。以下の例では、*は強調を表す記号ではなく、通常の文字として扱われます。


```
*Code String*
```



<pre><code>*Code String*
</code></pre>

コードフェンスを使用せずに、4スペース分のインデントでコードブロックを表すこともできます。

※インデントによるコードブロックには、情報文字列を入れることはできません。


    Code String
    Code String
    Code String



<pre><code>Code String
Code String
Code String
</code></pre>

インデントによるコードブロック内でインデントを入れたい場合は、「4スペース + ブロック内のインデント分」のスペースを入れます。

以下の例では、2行目のコードに2スペース分のインデント（計6スペース）を入れています。


    Code String
      Code String
    Code String



<pre><code>Code String
  Code String
Code String
</code></pre>

テーマの区切り

3つ以上並べられた---（ハイフン）、***（アスタリスク）、___（アンダースコア）は、テーマの区切りとして扱われます。通常、この区切りは水平線で表現されます。


---

***

___



<hr>

<hr>

<hr>

3文字以上使用することができ、文字間にはスペースを入れることもできます。以下の例はすべてテーマの区切りとして扱われます。


--------------------

* * * * * * * * * *

___   ___   ___



<hr>

<hr>

<hr>

強調テキスト

1つの*（アスタリスク）で囲まれたテキストは、強調テキストとして扱われます。*と強調テキストの間にスペースを入れてはなりません。通常、このテキストは斜体で表現されます。


*強調テキスト*

文章の中で*強調*にできる



<p><em>強調テキスト</em></p>

<p>文章の中で<em>強調</em>にできる</p>

*の代わりに_（アンダースコア）を使用することもできますが、Markdownの構文において使いにくい部分があるため、*を使用することをおすすめします。


_強調テキスト_

文章の中で_強調_にできない

前後にスペースを入れると _強調_ にできる



<p><em>強調テキスト</em></p>

<p>文章の中で_強調_にできない</p>

<p>前後にスペースを入れると <em>強調</em> にできる</p>

重要テキスト

2つの**（アスタリスク）で囲まれたテキストは、重要テキストとして扱われます。**と重要テキストの間にスペースを入れてはなりません。通常、このテキストは太字で表現されます。


**重要テキスト**

文章の中で**重要**にできる



<p><strong>重要テキスト</strong></p>

<p>文章の中で<strong>重要</strong>にできる</p>

**の代わりに__（アンダースコア）を使用することもできますが、Markdownの構文において使いにくい部分があるため、**を使用することをおすすめします。


__重要テキスト__

文章の中で__重要__にできない

前後にスペースを入れると __重要__ にできる



<p><strong>重要テキスト</strong></p>

<p>文章の中で__重要__にできない</p>

<p>前後にスペースを入れると <strong>重要</strong> にできる</p>

※この指定は「強い強調」と解説されることが多いですが、現在のHTMLの仕様ではstrong要素は「強い重要性、深刻さ、または緊急性を表す」と定義されているため、ここでは「重要テキスト」として説明しています。

コード範囲

1つ以上の`（バッククォート）で囲まれた範囲は、インラインのコードとして扱われます。


`Code String`

文章の中に`Code`を入れる



<p><code>Code String</code></p>

<p>文章の中に<code>Code</code>を入れる</p>

コード範囲内の文字は、Markdownとして解析されません。以下の例では、*は強調を表す記号ではなく、通常の文字として扱われます。


`*Code String*`



<p><code>*Code String*</code></p>

コード範囲内に`を入れたい場合は、内部の`の数と全体を囲む`の数が一致しないように調整します。

※コード範囲内では\によるエスケープが機能しないため、このように記述する必要があります。


``Code ` String``

`Code `` String`



<p><code>Code ` String</code></p>

<p><code>Code `` String</code></p>

コード範囲内の先頭と末尾のスペースは自動的に削除されますが、内部がスペースのみの場合は削除されません。


` Code String `

` `` `

`  `



<p><code>Code String</code></p>

<p><code>``</code></p>

<p><code>  </code></p>

バックスラッシュエスケープ

Markdownの構文で使用される記号を通常の文字として表示したい場合は、直前に\（バックスラッシュ）を入れることでエスケープすることができます。


\# 見出しではない

\- リスト項目ではない

1\. リスト項目ではない

\*強調ではない*



<p># 見出しではない</p>

<p>- リスト項目ではない</p>

<p>1. リスト項目ではない</p>

<p>*強調ではない*</p>

\自体をエスケープしたい場合は、\の直前に\を入れます。


\\*強調テキスト*



<p>\<em>強調テキスト</em></p>

\のエスケープは、コードブロックやコード範囲などでは機能せず、通常の文字として扱われます。


`` \` ``



<p><code>\`</code></p>

HTMLタグの使用

Markdownファイル内では、HTMLタグを使用することもできます。Markdownの構文で表現できない内容については、HTMLタグで記述することが可能です。

HTMLを記述する際のポイントは次のようになります。

  • HTMLの開始タグのみを記述した行により、HTMLブロックが開始される。（終了タグで開始される場合もある）
  • HTMLブロック内ではMarkdown構文が無効となり、インラインで使用されるHTML要素内ではMarkdown構文が有効になる。
  • 基本、HTMLブロックは空白行で区切られる。1つの要素内であっても、空白行が出現した時点でHTMLブロックはいったん終了する。
  • 例外として、pre要素、script要素、style要素、textarea要素で開始されたHTMLブロックは、空白行ではなく終了タグが出現した時点で終了する。これらのHTMLブロック内では空白行を含めることができる。
  • HTMLブロックの内容は、開始タグのみ、または終了タグのみの場合もある。

上記を念頭に、以下の説明をご覧ください。

以下は、table要素全体が1つのHTMLブロックとなるため、td要素内のMarkdown構文は無効になります。


<table>
<tr>
<td>
*強調されない*
</td>
</tr>
</table>



<table>
<tr>
<td>
*強調されない*
</td>
</tr>
</table>

以下は、table要素は前半と後半のHTMLブロックに分割され、その間にあるtd要素の内容は非HTMLブロックとなるため、Markdown構文は有効になります。


<table>
<tr>
<td>

*強調される*

</td>
</tr>
</table>



<table>
<tr>
<td>

<p><em>強調される</em></p>

</td>
</tr>
</table>

pre要素などで開始されているHTMLブロックは、終了タグが出現するまでは1つのHTMLブロックとみなされます。この場合は、空白行があったとしても内容のMarkdown構文は無効になります。


<pre>

*強調されない*

</pre>



<pre>

*強調されない*

</pre>

以下は、「*強調されない*」と書かれた部分はHTMLブロックの一部とみなされるため、Markdown構文は無効になります。


</div>
*強調されない*



</div>
*強調されない*

以下のように空白行で区切ると、「*強調される*」と書かれた部分のMarkdown構文が有効になります。


</div>

*強調される*



</div>

<p><em>強調される</em></p>

以下のspan要素はインラインで使用されているため、内容のMarkdown構文は有効になります。


これは<span>*インライン*</span>のサンプルです

<span>*これもインライン*</span>



<p>これは<span><em>インライン</em></span>のサンプルです</p>

<p><span><em>これもインライン</em></span></p>

同じ要素であっても、書き方によりMarkdown構文の有効・無効が変化します。

以下の1つ目のdel要素は、インラインで使用されているため内容のMarkdown構文は有効になります。2つ目のdel要素はHTMLブロックになるため、内容のMarkdown構文は無効になります。


<del>*これはインラインになります*</del>

<del>
*これはHTMLブロックになります*
</del>



<p><del><em>これはインラインになります</em></del></p>

<del>
*これはHTMLブロックになります*
</del>

特殊文字の扱い

Markdownファイル内では、< > &といった特殊文字をそのまま記述することができます。

通常、これらの文字はHTML出力時に文字参照に変換されます。


< > &



<p>&lt; &gt; &amp;</p>

HTMLタグの<と>については、変換されずにそのままタグとして機能します。


<span>サンプル</span>



<p><span>サンプル</span></p>

文字参照の一部である&も、変換されずにそのまま使用されます。


&copy;



<p>&copy;</p>

コードブロックやコード範囲の中では、HTMLタグや文字参照であっても特殊文字の部分が変換されます。


```
<span>サンプル</span>
```

`&copy;`



<pre><code>&lt;span&gt;サンプル&lt;/span&gt;
</code></pre>

<p>&amp;copy;</p>

参考サイト

Markdownに関連するサイトです。（別ウィンドウで開きます）