Markdownの基本的な構文について

Programmer KeiYou

2024年4月27日

1. 概要

Markdown（マークダウン）は、文書を記述するための軽量なマークアップ言語です。デジタル文書を活用する方法として考案されました。

特徴は、

手軽に文章構造を明示できること
簡単で、覚えやすいこと
読み書きに特別なアプリを必要としないこと
それでいて、対応アプリを使えば快適に読み書きできること

などです。Markdownはジョン・グルーバー（John Gruber）によって2004年に開発され、最初は Daring Fireball: Markdown で公開されました。その後、多くの開発者の手を経ながら発展してきました。

2. Markdown記法とは

Markdownには「書き方のルール」（記法）があります。

参考URL:

Markdown記法サンプル集

2-1. 見出し

1個から6個シャープで見出しを記述します。

※シャープと見出し文字の間には半角スペースを1つ入れること。

（１）記述例

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

（２）表示例

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

2-2. 段落(改行)

改行する方法は、以下の3つ記述があります。

1行空白の行を入れる
文末に半角空白スペースを2つつける
 タグを使う

2-2-1. 1行空白の行を入れる

（１）記述例

I really like using Markdown.

I think I'll use it to format all of my documents from now on.

（２）表示例

I really like using Markdown.

I think I’ll use it to format all of my documents from now on.

2-2-2. 文末に半角空白スペースを2つつける

（１）記述例

I really like using Markdown.  
I think I'll use it to format all of my documents from now on.

（２）表示例

I really like using Markdown.
I think I’ll use it to format all of my documents from now on.

2-2-3. ` `タグを使う

I really like using Markdown.<br>
I think I'll use it to format all of my documents from now on.

（２）表示例

I really like using Markdown.
I think I’ll use it to format all of my documents from now on.

2-3. 箇条書きリスト

箇条書きは、行頭に半角ハイフン＋スペース (- ) を置きます。スペースを忘れがちなので気をつけましょう。また、ハイフン以外にも、プラス、アスタリスクのいずれかで箇条書きリストを記述可です。

※ハイフン、プラス、アスタリスクと箇条書きの項目の間には半角スペースを1つ入れること。

（１）記述例

- リスト1
    - ネスト リスト1_1
        - ネスト リスト1_1_1
        - ネスト リスト1_1_2
    - ネスト リスト1_2
- リスト2
- リスト3

（２）表示例

リスト1
- ネストリスト1_1
  - ネストリスト1_1_1
  - ネストリスト1_1_2
- ネストリスト1_2
リスト2
リスト3

2-4. 番号付きリスト

数値+半角ドットで番号付きリストを記述可能です。

番号の内容は何でも良く、実際に表示される際に適切な番号で表示されます。

そのため、一般的にはすべて 1. 内容で記載すると変更の時、楽になります。

（１）記述例

1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3

（２）表示例

番号付きリスト1
1. 番号付きリスト1_1
2. 番号付きリスト1_2
番号付きリスト2
番号付きリスト3

※数値+半角ドットと箇条書きの項目の間には半角スペースを1つ入れること。

2-5. Description List - 説明リスト

HTMLの

タグをそのまま使うことで実現できます。

（１）記述例

<dl>
  <dt>リンゴ</dt>
      <dd>赤いフルーツ</dd>
  <dt>オレンジ</dt>
      <dd>橙色のフルーツ</dd>
</dl>

（２）表示例

リンゴ: 赤いフルーツ
オレンジ: 橙色のフルーツ

2-6. ` `を使用した説明リスト

 を使用して、以下のような記述も可能なようです。

（１）記述例

- リンゴ<br>
    赤いフルーツ<br>
- オレンジ<br>
    橙色のフルーツ<br>

（２）表示例

リンゴ
赤いフルーツ
オレンジ
橙色のフルーツ

2-7. 引用

引用は、行頭に半角不等号 (>) を置きます。

（１）記述例

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

（２）表示例

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

2-8. 二重引用

二重引用です。

（１）記述例

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

（２）表示例

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

2-9. pre記法(スペース4 or タブ)

半角スペース4個もしくはタブで、コードブロックをpre表示できます。

（１）記述例

スペース4個の場合

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

tab の場合

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

（２）表示例

スペース4個の場合

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

tab の場合

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

2-10. code記法

バッククォート(`)で文字列を囲むことでコードの一部を表示可能です。
エリアをコードとして記載したい場合は、三連バッククォート _``` または、~~~ をコードブロック前後に入力すると、フェンスされたコードブロックを作成できます。
コードブロック内でコードブロックを書きたい場合は異なる記号を使うことで記述できます。

（１）記述例

インストールコマンドは `gem install hoge` です

``` Java:sample.java
     //コメント
     private void test(String str) 
     {
         String text = new String();
     }
```

~~~
function test() {
  console.log("notice the blank line before this function?");
    console.log("notice the blank line before this function?");
        console.log("notice the blank line before this function?");
}
~~~

（２）表示例

インストールコマンドは gem install hoge です

     //コメント
     private void test(String str) 
     {
         String text = new String();
     }

function test() {
  console.log("notice the blank line before this function?");
    console.log("notice the blank line before this function?");
        console.log("notice the blank line before this function?");
}

2-11. 強調

強調の構文です。車体は、英字のみの対応となります。

2-11-1. 強調：``

テキストを斜体にするには、単語または語句の前後にアスタリスク(*)またはアンダースコア(_)を 1つ追加します。単語の中央を斜体にして強調するには、文字の周囲にスペースを入れずにアスタリスク(*)を 1つ追加します。
この強調は、、英字のみです。

（１）記述例

Italicized text is the cat's meow.

Italicized text is the *cat's meow*.  
Italicized text is the _cat's meow_.  
A*cat*meow

（２）表示例

Italicized text is the cat’s meow.

Italicized text is the cat’s meow.
Italicized text is the cat’s meow.
Acatmeow

2-11-2. 強調：``

テキストを太字にするには、単語または語句の前後に 2つのアスタリスク(**)またはアンダースコア(__)を追加します。強調するために単語の中央を太字にするには、文字の周囲にスペースを入れずに 2つのアスタリスク(**)を追加します。

（１）記述例

I just love bold text.

I just love **bold text**.  
I just love __bold text__.  
Love**is**bold

（２）表示例

I just love bold text.

I just love bold text.
I just love bold text.
Loveisbold

2-11-3 強調：` + `

テキストを太字と斜体で同時に強調するには、単語または語句の前後に 3 つのアスタリスクまたはアンダースコアを追加します。単語の中央を太字または斜体にして強調するには、文字の周囲にスペースを入れずに 3つのアスタリスクを追加します。

（１）記述例

This text is ***really important***.  
This text is ___really important___.  
This text is __*really important*__.  
This text is **_really important_**.  
This is really***very***important text.

（２）表示例

This text is really important.
This text is really important.
This text is really important.
This text is really important.
This is reallyveryimportant text.

2-12 水平線

アンダースコア、アスタリスク、ハイフンなどを3つ以上連続して記述することで水平線を表示します。

※連続するハイフンなどの間にはスペースがあっても良い。

（１）記述例

---
___
***

（２）表示例

2-13. リンク

リンクしたいテキストを半角 [] で囲み、それに続く半角 () にリンク先のURLを書きます。

（１）記述例

[KeiYouのソフト館へようこそ](https://progkeiyou.com/)

（２）表示例

KeiYouのソフト館へようこそ

2-14. 定義参照リンク

Markdownの文書の途中に長いリンクを記述したくない場合や、同じリンクの参照を何度も利用する場合は、リンク先への参照を定義することができます。

（１）記述例

[こっちからgoogle][google]

その他の文章

[こっちからもgoogle][google]

[google]: https://www.google.co.jp/

（２）表示例

こっちからgoogle

その他の文章

こっちからもgoogle

2-15. Images - 画像埋め込み

画像を表示します。

2-15-1. タイトル無しの画像を埋め込む

画像を追加するには、感嘆符 (!) を追加し、その後に括弧内の代替テキストと、括弧内の画像へのパスまたは URL を追加します。

（１）記述例

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

パスまたは URL の後に引用符で囲んでタイトルを追加できます。  
画像にカーソルを持っていくと、タイトルがポップアップ表示されます。
ただし、epud3、pdfでは機能しないようです。

![代替テキスト](画像のURL "タイトル")

![sakura02](https://progkeiyou.com/wp-content/uploads/sakura02.jpg "近所の公園の桜")

（２）表示例

sakura02

2-15-2. 画像のサイズ指定（Image Size）

画像の Markdown 構文では、画像の幅と高さを指定できません。画像のサイズを変更する必要があり、Markdown プロセッサが HTML をサポートしている場合は、img HTML タグを width 属性と height 属性を使用して、画像のサイズをピクセル単位で設定できます。

（１）記述例

<img width="200" src=https://progkeiyou.com/wp-content/uploads/sakura02.jpg>

<img height="200" src=https://progkeiyou.com/wp-content/uploads/sakura02.jpg title= "近所の公園の桜">

（２）表示例

2-15-3. 画像のキャプションの追加（Image Captions）

Markdown は画像キャプションをネイティブにサポートしていませんが、考えられる回避策が 2 つあります。

Markdown アプリケーションが HTML をサポートしている場合は、Figure および figcaption HTML タグを使用して画像にキャプションを追加できます。
もう一つの方法、画像に続くテキストを* で挟むと、キャプションとしてレイアウトされます。

（１）記述例

<figure>
    <img width="200" src="https://progkeiyou.com/wp-content/uploads/sakura02.jpg" alt="近所の公園の桜">
    <figcaption>近所の公園の桜</figcaption>
</figure>


![sakura02](https://progkeiyou.com/wp-content/uploads/sakura02.jpg )
*近所の公園の桜*

（２）表示例

sakura02 近所の公園の桜

2-15-4. 画像へのリンク設定（Linking Images）

画像にリンクを追加するには、画像のマークダウンをかっこで囲み、かっこ内にリンクを追加します。

（１）記述例

[![sakura02](https://progkeiyou.com/wp-content/uploads/sakura02.jpg "近所の公園の桜")](https://progkeiyou.com/) *画像をクリックすると、HPを表示します*

（２）表示例

画像をクリックすると、HPを表示します

2-16. テーブル

テーブルの表記方法です。

2-16-1. テーブル（右寄せ・中央寄せ・左寄せ）

右寄せ・中央寄せ・左寄せを反映する方法は、表の2行目にコロン「:」を挿入することで、文字の寄せ方を調整することができます。（「:」を挿入しない場合はデフォルトで左寄せとなります。）

表示位置	表記
左寄せ	;– —
中央寄せ	;–;
右寄せ	–;

（１）記述例

|header1|header2|header3|
|:--|:--:|--:|
|align left|align center|align right|
|a|b|c|

（２）表示例

header1	header2	header3
align left	align center	align right
a	b	c

2-16-2. テーブル（セルの中で改行）

1 つ以上の  HTMLタグを使用して、表のセル内の段落を区切る（セルの中で改行）ことができます。

（１）記述例

|header1|header2|header3|
|:--|:--:|--:|
|align<br>left|align<br>center|align<br>right|
|a<br>b<br>c|b<br>c|c|

（２）表示例

header1	header2	header3
align left	align center	align right
a b c	b c	c

2-16-3. テーブルをHTMLで入力する

HTMLをサポートしている環境では、<table> でテーブルを表示できます。

（１）記述例

<table>
  <caption>HTMLの要素</caption>
  <thead>
    <tr>
      <th>名前</th> <th>説明</th>
    </tr>
  </thead>
  <tr>
    <td> table </td> <td>テーブル</td>
  </tr>
  <tr>
    <td> caption </td> <td>テーブルのキャプション</td>
  </tr>
</table>

（２）表示例

HTMLの要素
名前	説明
table	テーブル
caption	テーブルのキャプション

2-17. 自動リンク（URLとメールアドレス）

“<>“でURLを囲むと自動でリンク表示になります。メールアドレスも同様です。

（１）記述例

<programmerkeiyou@gmail.com>

<https://progkeiyou.com/>

（２）表示例

programmerkeiyou@gmail.com

https://progkeiyou.com/

2-18. 文字の装飾

Markdownは、文字の装飾はサポートしていません。
HTML構文サポートしているアプリケーションでは、HTML構文を利用して、アンダーライン、色指定等が可能です。

2-18-1. アンダーライン（Underline）

おそらく、下線付きのテキストはリンクとほぼ同義であるため、Web ライティングでは通常は使用されません。ただし、論文やレポートを作成している場合、単語や語句に下線を引く必要があるかもしれません。

BearやSimplenoteなど、いくつかのアプリケーションはテキストの下線をサポートしていますが、Markdownはネイティブで下線をサポートしていません。MarkdownプロセッサがHTMLをサポートしている場合、<ins>HTMLタグ`を使用して文書内のテキストに下線を追加できます。

（１）記述例

Some of these words <ins>will be underlined</ins>.

（２）表示例

Some of these words will be underlined.

2-18-2. インデント（Indent）

Markdownでは、行末の空白を使用して改行を挿入したり、タブを使ってコードブロックを作成したりすることができます。

もう一つの選択肢は、MarkdownプロセッサがHTMLをサポートしている場合、 コードを使用することです。しかしながら、この方法は問題を引き起こす可能性があるため、おそらく最終手段として考えるべきです。基本的にすべての のインスタンスは、レンダリングされた出力ではスペースに置き換えられます。そのため、4つの を挿入すると、段落の前で段落が4つのスペースでインデントされたように見えます。

（１）記述例

This is the first sentence of my indented paragraph.

&nbsp;&nbsp;&nbsp;&nbsp;This is the first sentence of my indented paragraph.

（２）表示例

This is the first sentence of my indented paragraph.

2-18-3. 中央に配置（Center）

論文やレポートを作成する場合、テキストを中央に配置する機能は必要不可欠です。残念ながら、Markdownにはテキスト配置という概念が存在しません（テーブルの使用を例外とする場合を除きます）。

幸運なことに、使用できるHTMLタグ<center>があります。MarkdownプロセッサがHTMLをサポートしている場合、テキストを中央揃えにするためにこのタグをテキストの周囲に配置できます。

（１）記述例

<center>This text is centered.</center>

（２）表示例

This text is centered.

2-18-4. フォントサイズ（font size）

Markdownではテキストのフォントサイズを変更することはできませんが、MarkdownプロセッサがHTMLをサポートしている場合、 HTMLタグを利用できます。size属性を使用することで、フォントのサイズ変更する事ができます。

（１）記述例

<font size="1">フォントサイズを指定します</font>

<font size="3">フォントサイズを指定します</font>

<font size="5">フォントサイズを指定します</font>

（２）表示例

フォントサイズを指定します

2-18-5. 色指定（Color）

Markdownではテキストの色を変更することはできませんが、MarkdownプロセッサがHTMLをサポートしている場合、 HTMLタグを利用できます。color属性を使用することで、フォントの色を指定する際に色の名前または16進数の#RRGGBBコードを使用できます。

（１）記述例

<font color="red">This text is red!</font>

<font color="blue">This text is blue!</font>

<font color="navy">This text is navy!</font>

<font color="cyan">This text is cyan!</font>

<font color="green">This text is green!</font>

<font color="yellow">This text is yellow!</font>

<font color="orange">This text is orange!</font>

<font color="black">This text is black!</font>

<font color=#4169E1>This text is #4169E1!</font>

（２）表示例

This text is red!

This text is blue!

This text is navy!

This text is cyan!

This text is green!

This text is yellow!

This text is orange!

This text is black!

This text is #4169E1!

2-19. 特殊文字をそのまま表示する

*（アスタリスク）を表示したい場合は、次のようにアスタリスクの直前にバックスラッシュ(又は¥)を記述します。

（１）記述例

\*（アスタリスク）の表示方法１。

HTML形式で<p> </P>を使用することも出来ます。

<p>*（アスタリスク）の表示方法２。</p>

（２）表示例

*（アスタリスク）の表示方法１。

HTML形式で を使用することも出来ます。

*（アスタリスク）の表示方法２。

2-20. タスクリスト／チェックボックス

タスクリスト（チェックリストやToDoリストとも呼ばれます）を使用すると、チェックボックスを含む項目のリストを作成できます。タスクリストをサポートするMarkdownアプリケーションでは、コンテンツの横にチェックボックスが表示されます。

（１）記述例

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

（２）表示例

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

3. 参考情報

Markdownについての参考情報です。

3-1. Markdownの参考情報

参考情報

Markdownの参考情報す。

3-2. GitHub 及び Qiita

GitHub 及び Qiita のMarkdownの情報です。

3-3. RAD Studio(C++Builder), Visual Studioでも対応

統合開発環境である、RAD Studio 及び Visual Studio(Visual Studio Codeもですが) でも、Markdownがサポートされました。

4. Pandoc, wkhtmltopdf のMarkdownの対応

Markdownファイルを、Pandoc, wkhtmltopdfを使用して、ファイル形式の変換を行った後の各記法対応状況を表にまとめました。

4-1. ファイル変換

ファイル変換に関しましては、以下の表を参照ください。

アプリ	ファイル形式	オプション
秀丸	プレビュー	HmMarkdownSimpleServer使用
Pandoc	epud3	commonmark_xを設定
Pandoc	html
Pandoc	PDF	htmlから印刷
wkhtmltopdf	PDF	htmlから変換
Pandoc	Word	docx

4-2. 各記法の対応状況

以下に、各記法の対応状況をまとめました。
PDFは、htmlから変換しています。
docx への変換では、html構文はサポートしていないようです。

目次	秀丸	Pandoc	Pandoc	Pandoc	wkhtmltopdf	Pandoc
	プレビュー	epud3	html	html	html	Word
	HmMarkdownSimpleServer	commonmark_x		PDF	pdf	docx
2-1. 見出し	○	○	○	○	○	○
2-2. 段落(改行)
2-2-1. 1行空白の行を入れる	○	○	○	○	○	○
2-2-2. 文末に半角空白スペースを2つつける	○	○	○	○	○	○
2-2-3. タグを使う	○	○	○	○	○	×
2-3. 箇条書きリスト	○	○	○	○	○	○
2-4. 番号付きリスト	○	○	○	○	×	○
2-5. Description List - 説明リスト	○	○	○	○	○	×
2-6. を使用した説明リスト	○	○	○	○	○	×
2-7. 引用	○	○	○	○	○	×
2-8. 二重引用	○	○	○	○	○	×
2-9. pre記法(スペース4 or タブ)	○	○	○	○	○	△
2-10. code記法	○	○	○	○	○	△
2-11. 強調
2-11-1. 強調：	○	○	○	×	○	○
2-11-2. 強調：	○	○	○	×	○	○
2-11-3 強調： +	○	○	○	×	○	○
2-12 水平線	○	○	○	○	○	○
2-13. リンク	○	○	○	○	○	○
2-14. 定義参照リンク	○	○	○	○	○	○
2-15. Images - 画像埋め込み
2-15-1. タイトル無しの画像を埋め込む	○	○	○	○	○	○
2-15-2. 画像のサイズ指定（Image Size）	○	○	○	○	○	×
2-15-3. 画像のキャプションの追加（Image Captions）	○	○	○	○	○	○
2-15-4. 画像へのリンク設定（Linking Images）	○	○	○	○	×	○
2-16. テーブル
2-16-1. テーブル（右寄せ・中央寄せ・左寄せ）	○	○	○	○	○	○
2-16-2. テーブル（セルの中で改行）	○	○	○	○	○	×
2-16-3. テーブルをHTMLで入力する	○	○	○	○	○	×
2-17. 自動リンク（URLとメールアドレス）	○	○	○	○	○	○
2-18. 文字の装飾
2-18-1. アンダーライン（Underline）	○	○	○	○	○	×
2-18-2. インデント（Indent）	○	○	○	○	○	○
2-18-3. 中央に配置（Center）	○	○	○	○	○	×
2-18-4. フォントサイズ（font size）	○	○	○	○	×	×
2-18-5. 色指定（Color）	○	○	○	○	○	×
2-19. 特殊文字をそのまま表示する	○	○	○	○	○	△
2-20. タスクリスト／チェックボックス	○	○	○	○	○	○

1. 概要

2. Markdown記法とは

2-1. 見出し

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

2-2. 段落(改行)

2-2-1. 1行空白の行を入れる

2-2-2. 文末に半角空白スペースを2つつける

2-2-3. <br>タグを使う

2-3. 箇条書きリスト

2-4. 番号付きリスト

2-5. Description List - 説明リスト

2-6. <br>を使用した説明リスト

2-7. 引用

2-8. 二重引用

2-9. pre記法(スペース4 or タブ)

2-10. code記法

2-11. 強調

2-11-1. 強調：<em>

2-11-2. 強調：<strong>

2-11-3 強調：<em> + <strong>

2-12 水平線

2-13. リンク

2-14. 定義参照リンク

2-15. Images - 画像埋め込み

2-15-1. タイトル無しの画像を埋め込む

2-15-2. 画像のサイズ指定（Image Size）

2-15-3. 画像のキャプションの追加（Image Captions）

2-15-4. 画像へのリンク設定（Linking Images）

2-16. テーブル

2-16-1. テーブル（右寄せ・中央寄せ・左寄せ）

2-16-2. テーブル（セルの中で改行）

2-16-3. テーブルをHTMLで入力する

2-17. 自動リンク（URLとメールアドレス）

2-18. 文字の装飾

2-18-1. アンダーライン（Underline）

2-18-2. インデント（Indent）

2-18-3. 中央に配置（Center）

2-18-4. フォントサイズ（font size）

2-18-5. 色指定（Color）

2-19. 特殊文字をそのまま表示する

2-20. タスクリスト／チェックボックス

3. 参考情報

3-1. Markdownの参考情報

3-2. GitHub 及び Qiita

3-3. RAD Studio(C++Builder), Visual Studioでも対応

4. Pandoc, wkhtmltopdf のMarkdownの対応

4-1. ファイル変換

4-2. 各記法の対応状況

2-2-3. `<br>`タグを使う

2-6. `<br>`を使用した説明リスト

2-11-1. 強調：`<em>`

2-11-2. 強調：`<strong>`

2-11-3 強調：`<em> + <strong>`