Markdownについて

Programmer KeiYou

2024年4月27日

1. 概要

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

特徴は、

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

2.Markdownの記法一覧

Markdownの主な記法の一覧です。

Markdownには「方言」と呼ばれる派生版が存在しますので、お使いの環境でその記法が使用可能かどうか確認してお使いください。

種類 表記方法 表記例
見出し 行頭に #
( # の個数がH1~H6)
#見出し1
##見出し2
段落 空行を挿入 1段落目

2段落目
改行 行末に2つ以上の半角スペース
または、行末に
1行目  (行末に2つ以上の半角スペース)
2行目
強調 テキストの前後に * または _
1個:Italic
2個:Bold
3個:Bold and Italic
*Italic*
__Bold__
***Bold and Italic***
引用 行頭に > >メールの返信と同じですね
リスト
箇条書き
行頭に * または - - リスト1
- リスト2

* リスト1-1
* リスト1-2
番号付リスト 行頭に 番号の後にピリオド
番号 1 から始める
1. リスト1
2. リスト2
3. リスト3
コード テキストをバッククォート (`) で囲む
行頭に、4 つのスペースまたは 1 つのタブを挿入
At the command prompt, type nano.
横線
区切り線
一行に、3つ以上の * _ または ***
---
___
リンク [タイトル](リンク先URL) [KeiYouのソフト館](https://progkeiyou.com/ "ソフトの情報発信")
画像 ![タイトル](リンク先)
![タイトル](リンク先 *キャプション*)
[![タイトル](リンク先 *キャプション*)](リンク先URL)
![Ocean1 1920](https://progkeiyou.com/wp-content/uploads/2023/09/Ocean1_1920.png "Ocean1_1920")

[![Ocean1 1920 画像3](https://progkeiyou.com/wp-content/uploads/2023/09/Ocean1_1920.png "Ocean1 1920 画像3")](https://progkeiyou.com/)

テーブル
3 つ以上のハイフン (-–) を使用して各列のヘッダーを作成し、パイプ (|) を使用して各列を区切る | Syntax | Description | Test Text |
| :— | :––: | —: |
| left | center | right |
| Paragraph | Text | And more |
Center <center> HTMLタグを使用 <center>This text is centered.</center>
Underline <ins> HTML タグを使用 Some of these words <ins>will be underlined</ins>.
文字色の指定 <font> HTML タグを使用 <font color="red">This text is red!</font>
取り消し線(Strikethrough) 単語の前後に 2 つのチルダ記号 (~~) を挿入 ~~The world is flat.~~ We now know that the world is round.
タスクリスト(Task Lists) ( [ ] ) を含む括弧を追加
チェックボックスを選択するには、括弧 ( [x] ) の間に x を追加
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
絵文字(Emoji) 絵文字のショートコードを入力 That is so funny! :joy:
ハイライト表示 単語の前後に 2 つの等号 (==)を挿入
mark HTML タグを使用
I need to highlight these ==very important words==.

I need to highlight these <mark>very important words</mark>.
上付きの添字(Subscript) 文字の前後にチルダ記号 (~) を 1 つ挿入
または、subタグを使用
H~2~O
H<sub>2</sub>O
下付の添字(Superscript) 文字の前後にキャレット記号 (^) を 1 つ挿入
または、supタグを使用
X^2^
X<sup>2</sup>
コメント HTMLの<!-- --> <!---
コメント
-->

3. Markdownの記法(Basic Syntax)

Markdownの「書き方のルール」(記法)を説明します。
先ず、以下のURLに基本的な記法について説明があります、この内容に沿って説明します。

Basic Syntax
https://www.markdownguide.org/basic-syntax/

3-1. 見出し

3-1-1. 見出し(Headings)

見出しを作成するには、単語または語句の前に個から6個のシャープ記号 (#) を追加します。使用する番号記号の数は、見出しレベルに対応する必要があります。たとえば、見出しレベル 3 (<h3>) を作成するには、3つのシャープ記号を使用します。

(1)記述例

 # Heading level 1
 ## Heading level 2
 ### Heading level 3
 #### Heading level 4
 ##### Heading level 5
 ###### Heading level 6

(2)表示例

見出しの実際の表示は、CSSの設定によって変わります。
見出しレベル4~6の例です。

Heading level 4

Heading level 5
Heading level 6

3-1-2. 見出し(Alternate Syntax)

上記の方法以外に、テキストの下の行に、見出しレベル 1 の場合は == 文字を、見出しレベル 2 の場合は -- 文字を任意の数追加しても、見出し1,見出し2の記述が可能です。

(1)記述例

Heading level 1
===============

Heading level 2
---------------

(2)表示例

表示例は、省略します。

注

3-2. 段落(Paragraphs)

段落を作成するには、空行を挿入します。

(1)記述例

I really like using Markdown.

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

(2)表示例

I really like using Markdown.

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

3-3. 改行(Line Breaks)

改行または新しい行 (<br>) を作成するには、行末に2つ以上のスペースを挿入します。 <br>を挿入しても、改行する事ができます。

エディタを使用する場合、行末のスペースは見た目ではわかりにくいため、<br>の使用をお勧めします。

(1)記述例

This is the first line.  
And this is the second line.  

This is the first line.<br>
And this is the second line.

(2)表示例

This is the first line.
And this is the second line.

This is the first line.
And this is the second line.

3-4. 強調(Emphasis)

テキストを太字または斜体にすることで強調を加えることができます。

3-4-1. 強調(<em>、Italic)

テキストを斜体にするには、単語または語句の前後にアスタリスク(*)またはアンダースコア(_)を 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

(2)表示例

Italicized text is the cat’s meow.

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

3-4-2. 強調(<strong>、Bold)

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

(1)記述例

I just love bold text.

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

(2)表示例

I just love bold text.

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

3-4-3. 強調(<em> + <strong>、Bold and Italic)

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

(1)記述例

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.

(2)表示例

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

3-5. 引用

3-5-1. 引用(Blockquotes)

引用を作成するには、段落の前に > を追加します。

(1)記述例

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

(2)表示例

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

3-5-2. 引用[段落](Blockquotes with Multiple Paragraphs)

ブロック引用符には複数の段落を含めることができます。段落間の空行に > を追加します。

(1)記述例

> 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)表示例

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.

3-5-3. 引用の入れ子(Nested Blockquotes)

ブロック引用符は入れ子にすることができます。ネストしたい段落の前に >> を追加します。

(1)記述例

> 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)表示例

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.

3-5-4. 引用[その他](Blockquotes with Other Elements)

ブロック引用符には、他のマークダウン形式の要素を含めることができます。すべての要素を使用できるわけではありませんので、どの要素が機能するかを試してみる必要があります。

(1)記述例

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

(2)表示例

The quarterly results look great!

Everything is going according to plan.

3-5-5. 引用[マークダウン形式の要素を無効にしたい時]

引用の中で、マークダウン形式の要素を無効にしたい時は、\ を付けます。

(1)記述例

> \#### The quarterly results look great!
>
> \- Revenue was off the chart.<br>
> \- Profits were higher than ever.
>
>  \*Everything* is going according to **plan**.

(2)表示例

#### The quarterly results look great!

- Revenue was off the chart.
- Profits were higher than ever.

*Everything* is going according to plan.

注 互換性を保つために、ブロック引用符の前後に空行を入れてください。

3-6. リスト(箇条書き)

項目を順序付きリスト、及び順序なしリストを記述できます。

3-6-1. 番号付きリスト(Ordered Lists)

順序付きリストを作成するには、番号の後にピリオド(.)が続く行項目を追加します。番号は番号順である必要はありませんが、リストは番号 1から始める必要があります。ピリオドの後には、半角スペースが必要です。

(1)記述例

1. First item
2. Second item
3. Third item
4. Fourth item
<p> </p>

1. First item
1. Second item
1. Third item
1. Fourth item
<p> </p>

1. First item
8. Second item
3. Third item
5. Fourth item
<p> </p>

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item

(2)表示例

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item

3-6-2. 順序なしリスト(Unordered Lists)

順序なしリストを作成するには、行項目の前にダッシュ (-)、アスタリスク (*)、またはプラス記号 (+) を追加します。1つ以上の項目をインデントして、ネストされたリストを作成します。

(1)記述例

- First item
- Second item
- Third item
- Fourth item
<p> </p>

* First item
* Second item
* Third item
* Fourth item
<p> </p>

+ First item
+ Second item
+ Third item
+ Fourth item
<p> </p>

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item

(2)表示例

注 ハイフン、プラス、アスタリスクとリストの項目の間には半角スペースを1つ入れる必要があります。

3-6-3. リスト(Starting Unordered List Items With Numbers)

番号のないリスト項目を数字の後にピリオド(.)で始める必要がある場合は、バックスラッシュ (\) を使用してピリオド(.)をエスケープできます。

(1)記述例

- 1968\. A great year!
- I think 1969 was second best.

(2)表示例

注
Markdown アプリケーションは、同じリスト内の異なる区切り文字を処理する方法について合意していません。互換性を確保するために、同じリスト内で区切り文字を混在させたり一致させたりしないでください。1 つを選択し、それを使用してください。

3-6-4. 説明リスト(Description List)

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

(1)記述例

<dl>
  <dt>ネコ</dt>
  <dd>雑種</dd>
  <dt>イヌ</dt>
  <dd>柴犬</dd>
</dl>

(2)表示例

ネコ
雑種
イヌ
柴犬

3-6-5. 説明リスト2

HTMLの<br> と、リストを組み合わせて、以下の様に記述する事はできるようです。

(1)記述例

- ネコ<br>
    雑種<br>
- イヌ<br>
    柴犬<br>

(2)表示例

3-7. コード

ソースコートのように見た目通りに表示したいことがあります。そのような時は、以下のように記述します。

3-7-1. コード(Code)

単語または語句をコードとして表示するには、バッククォート (`) で囲みます。

(1)記述例

At the command prompt, type `nano`.

(2)表示例

At the command prompt, type nano.

3-7-2. コード(Escaping Backticks)

コードとして示す単語またはフレーズに 1つ以上のバッククォート(`)が含まれている場合は、単語またはフレーズを 2つのバッククォート (``) で囲むことでエスケープできます。

(1)記述例

``Use `code` in your Markdown file.``

(2)表示例

Use `code` in your Markdown file.

3-7-3. コードブロック(Fenced Code Blocks)

コードブロックを作成するために行を4つのスペースまたは1つのタブでインデントすることができます。しかし、これが不便だと感じる場合は、フェンスで囲まれたコードブロックを試してみてください。

Markdownプロセッサやエディタによっては、コードブロックの前後の行で3つのバックティック(```)または3つのチルダ(~~~)を使用します。

(1)記述例

``` の場合

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

~~~ の場合

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

スペース4個の場合

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

tab の場合

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

(2)表示例

``` の場合

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

~~~ の場合

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

スペース4個の場合

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

tab の場合

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

3-8. 横線(Horizontal Rules)

横線(水平線)を作成するには、1 行に 3 つ以上のアスタリスク (***)、ダッシュ (---)、またはアンダースコア (___) を単独で使用します。

(1)記述例

***

---

_________________

(2)表示例




注 互換性を保つために、横線の前後に空行を入れてください。

3-9. リンク

リンクを作成するには、リンク テキストを括弧で囲み (例: [KeiYouのソフト館])、その直後に括弧内の URL を続けます (例: (https://progkeiyou.com/))。
HTMLで記述する事もできます。

(1)記述例

[KeiYouのソフト館](https://progkeiyou.com/)

<a href="https://progkeiyou.com/">link</a>

(2)表示例

KeiYouのソフト館

KeiYouのソフト館

3-9-2. リンクにタイトルを追加(Adding Titles)

必要に応じて、リンクにタイトルを追加できます。これは、ユーザーがリンク上にマウスを移動するとツールチップとして表示されます。タイトルを追加するには、URL の後に引用符で囲みます。

(1)記述例

[KeiYouのソフト館](https://progkeiyou.com/ "ソフトの情報発信")

(2)表示例

KeiYouのソフト館

3-9-3. リンク(URLs and Email Addresses)

URL または電子メール アドレスを簡単にリンクに変換するには、それを山括弧(<>)で囲みます。

(1)記述例

<https://www.markdownguide.org>  
<programmerkeiyou@gmail.com>

(2)表示例

https://www.markdownguide.org
programmerkeiyou@gmail.com

リンクを強調するには、角かっこ([])の前後にアスタリスク(*)を追加します。リンクをコードとして示すには、括弧内(())にバッククォート(`)を追加します。

(1)記述例

I love supporting the **[EFF](https://eff.org)**.  
This is the *[Markdown Guide](https://www.markdownguide.org)*.  
See the section on [`code`](#code).  

(2)表示例

I love supporting the EFF.
This is the Markdown Guide.
See the section on code.

3-9-5. 定義参照リンク

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

(1)記述例

リンクの記述

[googleへのリンク1][google]  
別の箇所で  
[googleへのリンク2][google]

参照リンクの定義

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

(2)表示例

googleへのリンク1
別の箇所で
googleへのリンク2

3-10. 画像

3-10-1. 画像(Images)

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

(1)記述例

![Ocean1 1920](https://progkeiyou.com/wp-content/uploads/2023/09/Ocean1_1920.png)

(2)表示例

Ocean1 1920

3-10-2. タイトル付きの画像(Images)

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

(1)記述例

タイトル: Ocean1_1920

![Ocean1 1920](https://progkeiyou.com/wp-content/uploads/2023/09/Ocean1_1920.png "Ocean1_1920")

(2)表示例

Ocean1 1920

3-10-3. 画像のサイズ指定(Image Size)

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

(1)記述例

<img src="https://progkeiyou.com/wp-content/uploads/2023/09/Ocean1_1920.png" width="200" height="66">

(2)表示例

3-10-4. 画像のキャプションの追加(Image Captions)

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

Markdown アプリケーションが HTML をサポートしている場合は、Figure および figcaption HTML タグを使用して画像にキャプションを追加できます。

(1)記述例

<figure>
    <img src="https://progkeiyou.com/wp-content/uploads/2023/09/Ocean1_1920.png"
         alt="Ocean1 1920">
    <figcaption>Ocean1 1920 画像</figcaption>
</figure>


![Ocean1 1920 画像2](https://progkeiyou.com/wp-content/uploads/2023/09/Ocean1_1920.png)
*Ocean1 1920 画像2*

(2)表示例

Ocean1 1920
Ocean1 1920 画像

Ocean1 1920 画像2 Ocean1 1920 画像2

3-10-5. 画像へのリンク設定(Linking Images)

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

(1)記述例

[![Ocean1 1920 画像3](https://progkeiyou.com/wp-content/uploads/2023/09/Ocean1_1920.png "Ocean1 1920 画像3")](https://progkeiyou.com/)

(2)表示例

Ocean1 1920 画像3

3-11. エスケープ文字(Escaping Characters)

Markdown ドキュメント内のテキストの書式設定に使用されるリテラル文字を表示するには、文字の前にバックスラッシュ (\) を追加します。

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

Character Name
|backslash
` backtick (see also escaping backticks in code)
* asterisk
_ underscore
{ } curly braces
[ ] brackets
< > angle brackets
( ) parentheses
# pound sign
+ plus sign
- minus sign (hyphen)
. dot
! exclamation mark
| pipe (see also escaping pipe in tables)

Info エスケープ文字

Markdownの構文で、使用している記号を文字として表示したい場合があります。表示場所によっては、正常に表示できないことがあります。その場合は、以下のエスケース文字を試してみてください。

記号 コード 意味
< &lt; 小なり
> &gt; 大なり
| &#124; パイプ
&#39; シングルクォーテーション
&quot; ダブルクォーテーション
& &amp; アンパサンド(アンド)
空白文字 &nbsp; 空白
¥ &yen; 日本円
<code>|</code> 

4. Markdownの記法(Extended Syntax)

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

いくつかの個人や組織が、表、コード ブロック、構文の強調表示、URL の自動リンク、脚注などの追加要素を追加することで、基本構文を拡張することに取り組みました。

その為、すべての Markdown アプリケーションが拡張構文要素をサポートしているわけではありません。アプリケーションが使用している軽量マークアップ言語が、使用したい拡張構文要素をサポートしているかどうかを確認する必要があります。アプリケーションによってはサポートされていない記法もありますので注意してください。

以下のURLに拡張構文(記法)について説明がありますので、この内容に沿って説明します。

Extended Syntax
https://www.markdownguide.org/extended-syntax/

4-1. テーブル

テーブルの記法を説明します。
表内のテキストは書式設定できます。たとえば、リンク、コード(コードブロックではなく、バックティック(`)内の単語またはフレーズのみ)、および強調を追加できます。

4-1-1. テーブル(Tables)

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

(1)記述例

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

(2)表示例

Syntax Description
Header Title
Paragraph Text

Info MaekdownのTableコードを作成してくれるWebアプリケーション


Info Excel⇔Markdownで双方向にコピペできるExcelアドイン

4-1-2. テーブル(Alignment)

ヘッダー行内のハイフンの左、右、または両側にコロン (:) を追加すると、列内のテキストを左、右、または中央に揃えることができます。(「:」を挿入しない場合は、デフォルトで左寄せとなります。)

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

(1)記述例

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

(2)表示例

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

4-1-3. セル内の段落(Line Breaks Within Table Cells)

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

(1)記述例

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

(2)表示例

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

4-1-4. セル内へのリストの追加(Lists Within Table Cells)

HTML タグを使用して、表のセル内にリストを追加できます。

(1)記述例

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title |
| List        | Here's a list! <ul><li>Item one.</li><li>Item two.</li></ul> |

(2)表示例

Syntax Description
Header Title
List Here’s a list!
  • Item one.
  • Item two.

4-1-5. セルの装飾(Table of Contents)

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

[1]アンダーライン(Underline)

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

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

(1)記述例

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

(2)表示例

Some of these words will be underlined.

[2]インデント(Indent)

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

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

(1)記述例

This is the first sentence of my indented paragraph.

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

(2)表示例

This is the first sentence of my indented paragraph.

    This is the first sentence of my indented paragraph.

[3]中央に配置(Center)

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

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

(1)記述例

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

(2)表示例

This text is centered.

[4]フォントサイズ(font size)

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

(1)記述例

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

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

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

(2)表示例

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

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

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

[5]色指定(Color)

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

(1)記述例

<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>

(2)表示例

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!

4-2. コードブロック(Fenced Code Blocks)

基本的なMarkdown構文を使用すると、コードブロックを作成するために行を4つのスペースまたは1つのタブでインデントすることができます。しかし、これが不便だと感じる場合は、フェンスで囲まれたコードブロックを試してみてください。

Markdownプロセッサやエディタによっては、コードブロックの前後の行で3つのバックティック(```)または3つのチルダ(~~~)を使用します。

(1)記述例

``` の場合

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

スペース4個の場合

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

tab の場合

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

(2)表示例

``` の場合

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

スペース4個の場合

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

tab の場合

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

[6]テーブル内でパイプ文字を表示する方法

前述しましたが、HTML 文字コード (&#124;) を使用して、テーブル内にパイプ (|) 文字を表示できます。

(1)記述例

パイプ文字  &#124; の表示

(2)表示例

パイプ文字 | の表示

4-3. 脚注(Footnotes)

脚注(注釈)を使用することで、文書の本文を整理しつつメモや参考文献を追加できます。脚注を作成すると、脚注参照を追加した場所にリンク付きの上付き数字が表示され、読者はそのリンクをクリックして、ページの下部にある脚注の内容にジャンプできます。

脚注参照を作成するには、括弧([^1])の中にキャレットと識別子を追加します。識別子には数字や単語を使用できますが、スペースやタブを含めることはできません。識別子は、脚注参照と脚注自体を関連付けるためのものであり、出力では脚注には連続した番号が付けられます。

脚注を追加するには、別のキャレット(^)とコロン(:)を使用して、括弧内に数字とテキストを含めます([^1]: My footnote.)。脚注を文書の最後にまとめる必要はありません。リスト、ブロック引用符、テーブルなどの他の要素内に配置する以外の、どこにでも配置できます。

(1)記述例

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.

4-4. 内部リンク

4-4-1. 見出しのID(Heading IDs)

多くの Markdown プロセッサは見出しのカスタム ID をサポートしており、一部の Markdown プロセッサはそれらを自動的に追加します。カスタム ID を追加することで、見出しに直接リンクし、CSS で見出しを変更できるようになります。カスタム見出し ID を追加するには、見出しと同じ行でカスタム ID を中括弧で囲む必要があります。

記述例

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

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

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

この機能をサポートしていれば、以下をクリックすると、第3章の先頭に飛びます。

Markdownの記法(Basic Syntax)

4-4-2. ページ内リンク

ページ内リンクの作成には、HTMLを用います。

移動したい位置にidを付けます。

IDの書き方は、 です。

クリックして、IDの場所に移動するには、以下のように記述します。

(1)記述例

[Markdownの記法一覧へ移動](#記法一覧)

[その他情報へ移動](#ext_title)

(2)表示例

Markdownの記法一覧へ移動

その他情報へ移動

4-5. 定義リスト(Definition Lists)

一部の Markdown プロセッサでは、用語の定義リストとそれに対応する定義を作成できます。定義リストを作成するには、最初の行に用語を入力し、次の行にコロンを入力し、その後にスペースと定義を入力します。(スペースが3個必要な環境もあります。)

(1)記述例


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)表示例

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 は次のようになります。

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.

4-6. 取り消し線(Strikethrough)

単語に取り消し線を付けるには、単語の前後に 2 つのチルダ記号 (~~) を使用します。

単語の中心に水平線を引くと、単語に取り消し線を引くことができます。 結果は次のようになります。 この機能を使用すると、特定の単語が文書に含める意図のない間違いであることを示すことができます。 単語に取り消し線を付けるには、単語の前後に 2 つのチルダ記号 (~~) を使用します。

(1)記述例

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

(2)表示例

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

4-7. タスクリスト/チェックボックス

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

タスクリストを作成するには、タスクリストの項目の前にダッシュ(-)とスペース([ ])を含む角括弧を追加します。チェックボックスを選択するには、括弧([x])の間にxを追加します。

(1)記述例

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

(2)表示例

4-8. 絵文字(Emoji)

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

4-8-1. 絵文字のコピーと貼り付け

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

Info Emojipedia

検索もできます。以下、一例です。

ℹ️🛈⚠️📝🖌️👓🆗🆖✅❎❤️💚😉😀😂😅📆🔗⚙️


Info 【Markdown】絵文字一覧チートシート

Info エディタで使える絵文字

4-8-2. 絵文字ショートコードの使用

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

(1)記述例

Gone camping! :tent: Be back soon.

That is so funny! :joy: :warning: :+1: :-1: :clipboard: :keyboard: :link: 

(2)表示例

Gone camping! Be back soon.

That is so funny! 😂 ⚠️ 👍 👎 📋 ⌨️ 🔗

Info 絵文字リスト

以下、ショートコードの一例です。

絵文字 ショートコード
😄 :smile:
💚 :green_heart:
💔 :broken_heart:
:alarm_clock:
🔍 :mag:
🔨 :hammer:
📧 :e-mail:
📑 :bookmark_tabs:
📆 :calendar:
📝 :memo:
👓 :eyeglasses:
🏠 :house:
⚠️ :warning:
:white_check_mark:
ℹ️ :information_source:
🛠️ :hammer_and_wrench:
:o:
:x:
🔗 :link:
⚙️ :gear:
👍 :+1:
👎 :-1:

4-9. ハイライト表示

4-9-1. ハイライト表示(Highlight)

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

(1)記述例

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

(2)表示例

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

4-9-2. ハイライト表示(markタグを使用)

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

(1)記述例

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

(2)表示例

I need to highlight these very important words.

4-10. 添字

4-10-1. 下付き文字(Subscript)

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

(1)記述例

H~2~O

(2)表示例

H2O

subタグを使用

(1)記述例

H<sub>2</sub>O

(2)表示例

H2O

4-10-2. 上付き文字(Superscript)

一般的ではありませんが、一部の Markdown プロセッサでは、上付き文字を使用して 1 つ以上の文字を通常の入力行の少し上に配置できます。上付き文字を作成するには、文字の前後にキャレット記号 (^) を 1 つ使用します。

(1)記述例

X^2^

(2)表示例

X2

supタグを使用

(1)記述例

X<sup>2</sup>

(2)表示例

X2

4-11. 自動URLリンク

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

(1)記述例

KeiYouのソフト館
https://progkeiyou.com/

(2)表示例

KeiYouのソフト館
https://progkeiyou.com/

4-12. 略語

Markdown Extra は、略語 (HTML タグ) のサポートを追加します。その仕組みは非常に簡単です。次のような略語定義を作成します。

(1)記述例

略語定義

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

次に、文書内の別の場所に次のようなテキストを書き込みます。

The HTML specification   
is maintained by the W3C.

(2)表示例

*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium

The HTML specification
is maintained by the W3C.

4-13. 印刷時の改ページ

これは、Markdownの機能ではないのですが、Pandocでepub等に変換する時、指定した場所で改ページしたいときがあります。“page-break-before:always“を使用する事で、その挿入場所で改ページすることができます。Pandocでは、MarkdownファイルをHTMLファイルに変換できます。HTMLファイルには、改行という機能(概念)はありませんが、そのHTMLファイルを印刷するとき、PDFファイルとして保存(印刷)するときは、“page-break-before:always“の場所で、改ページされます。

以下記述を。改行したい場所に挿入します。

<div style="page-break-before:always"></div>

5. 比較表

5-1. ファイル変換

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

秀丸 Pandoc Pandoc Pandoc wkhtmltopdf Pandoc
プレビュー epud3 html html html Word
HmMarkdownSimpleServer commonmark_x PDF pdf docx

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

以下に、各フォーマットにおける未対応状況をまとめました。ただし、これは私の環境での調査に基づく情報ですので、変換時のパラメータや環境によっては異なる結果が得られる可能性があります。ご注意ください。

PDF: HTMLからの変換を行っています。
DOCX: HTML構文はサポートされていないようです。(HTML構文に関する未対応内容は、以下の表から除外しています。)

項目 秀丸 Pandoc Pandoc Pandoc Pandoc wkhtmltopdf
プレビュー epud3 docx html html html
commonmark_x PDF pdf
3-6-1. 番号付きリスト(Ordered Lists) ×
3-10-2. タイトル付きの画像(Images) × × × × ×
3-10-5. 画像へのリンク設定(Linking Images) ×
4-1-5. セルの装飾(Table of Contents) ×
4-4-2.ページ内リンク × ×
4-5. 定義リスト(Definition Lists)
4-6. 取り消し線(Strikethrough)
4-8-1. 絵文字のコピーと貼り付け × ×
4-8-2. 絵文字ショートコードの使用 × ×
4-9-1. ハイライト表示(Highlight) × × × × ×
4-11. 自動URLリンク × ×

6. 参考情報

6-1. Markdownの参考情報

Markdownの参考情報です。

6-2. GitHub 及び Qiita

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

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

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