ゼロから学ぶMarkdown 第4回 箇条書きの表現

Markdown(マークダウン)はとてもシンプルな記述言語。文書を書くときの共通ルールみたいなもの。とにかくシンプルなのが特徴。Markdown対応のエディタを使えば文書が読みやすく表示されるので知っていると便利。今回は「箇条書きの表現」を学ぶ。

目次

箇条書きの表現方法 基本編 List

正しくは"箇条書き"ではなく"List"の記載方法です。リストとして表現したい文章の前にハイフン" - "もしくはアスタリスク" * "を記述することで、リストとして表示できる。

サンプル記述:箇条書きの記載方法その1

- 項目1
- 項目2
- 項目3

実際にはこのように表現される。

  • 項目1
  • 項目2
  • 項目3

サンプル記述:箇条書きの記載方法その2

* 項目1
* 項目2
* 項目3

実際にはこのように表現される。

  • 項目1
  • 項目2
  • 項目3

箇条書きの表現方法 基本編 番号付きList

番号付きリストとして表現したい文章の前に数字+ドット" . "を記述することで、番号付きリストとして表示できる。

サンプル記述:番号付きリスト

1. 項目1
2. 項目2
3. 項目3

実際にはこのように表現される。

  1. 項目1
  2. 項目2
  3. 項目3

箇条書きの表現方法 応用編 表示レベルの変更

箇条書きの表示レベルを変更したい場合、ハイフン" - "やアスタリスク" * "の前に空白を挿入すればよい。ただし、エディタによって表示方法が異なるので注意が必要。

サンプル記述:スペースを複数個挿入した場合

- スペース0
 - スペース1
  - スペース2
   - スペース3
    - スペース4
     - スペース5
      - スペース6
       - スペース7
        - スペース8

実際にはこのように表現される。

  • スペース0
  • スペース1
  • スペース2
  • スペース3
    • スペース4
    • スペース5
    • スペース6
    • スペース7
      • スペース8

考察1 番号付きリスト: 表示レベルの変更

番号付きリストの前に空白を付与したらどう表示されるのか試してみた。

サンプル記述:番号付きリストの前にスペースを複数個挿入した場合

1. スペース0
 2. スペース1
  3. スペース2
   4. スペース3
    5. スペース4
     6. スペース5
      7. スペース6
       8. スペース7
        9. スペース8

実際にはこのように表現される。

  1. スペース0
  2. スペース1
  3. スペース2
  4. . スペース3
    1. スペース4
    2. スペース5
    3. スペース6
    4. . スペース7
      1. スペース8

これによりレベル付きで表示されていることがわかる。また、番号が自動で振りなおされていることもわかる。 つまり、自分で番号を付与していても、エディタで振りなおされるため、付与する意味がないと推測できる。

考察2 番号付きリスト: 番号の自動付与

番号付きリストの番号が自動で付与されるかどうか確認してみます。

サンプル記述:番号付きリスト 番号の自動付与の確認

1. 1行目
1. 2行目
1. 3行目
1. 4行目

実際にはこのように表現される。

  1. 1行目
  2. 2行目
  3. 3行目
  4. 4行目

自動付与されてそうですね。

注意点

文章の前後に改行や空白などが必要な場合があるので、各エディタにあわせて確認してみてください。

参考リンク

help.hatenablog.com help.github.com daringfireball.net

ゼロから学ぶMarkdown 第3回 ソースコードの表現

Markdown(マークダウン)はとてもシンプルな記述言語。文書を書くときの共通ルールみたいなもの。とにかくシンプルなのが特徴。Markdown対応のエディタを使えば文書が読みやすく表示されるので知っていると便利。今回は「ソースコードの表現方法」を学ぶ。

ソースコードの表現方法

ソースコードとして表現したい文章の前後にバッククォートを3つ記述することで、コードブロックとして表示できる。

サンプル記述:コードブロックの設定方法

 ``` 
  main(){
    printf("hello");
  }
 ```

実際にはこのように表現される。

main(){
  printf("hello");
}

ソースコードの表現方法の考察

エディタによっては下記のように表現される場合がある。

Sample Code

このときの記述方法は2つあった。 どちらもエディタ依存の可能性があるので各自確認頂きたい。

ケース1 バッククォートの後に改行なし

1つめはバッククォートの後に改行せずコードを記述するケース。 実際にはこのように表現される。

Sample Code

サンプル記述:コードブロックの設定方法 その2-1

 ```Sample Code```

ケース2 バッククォートの前にスペース挿入

2つめはバッククォートの前にスペースが挿入されているケース。 実際にはこのように表現される。

Sample Code

サンプル記述:コードブロックの設定方法 その2-2

 ```
 Sample Code
 ```

注意点

バッククォートの入力

バッククォートとは、この記号「 ` 」のことです。 自分のPCの場合、Shift + @ (Shiftを押しながら@ボタン)で入力できます。 シングルクォート「 ' 」とは異なるので注意して下さい。

おまけ

バッククォートの英語表記

英語では必ずしもbackquoteと言うとは限りません。 とくに海外ではbacktickとして使用されているケースも多くあります。 プログラミング言語や考え方にも依存するようです...

参考リンク

help.hatenablog.com help.github.com daringfireball.net

ゼロから学ぶMarkdown 第2回 文字のスタイル設定

Markdown(マークダウン)はとてもシンプルな記述言語。文書を書くときの共通ルールみたいなもの。とにかくシンプルなのが特徴。Markdown対応のエディタを使えば文書が読みやすく表示されるので知っていると便利。今回は「文字のスタイル設定」を学ぶ。

スタイルの設定方法

文字の前に様々な特殊記号を記述することで、文字のスタイルを変更できる。

サンプル記述:文字のスタイルの設定方法

**サンプル1 太文字**
__サンプル2 太文字__
*サンプル3 斜め文字*
_サンプル4 斜め文字_
~~サンプル5 取り消し線~~

実際にはこのように表現される。

サンプル1 太文字

サンプル2 太文字

サンプル3 斜め文字

サンプル4 斜め文字

サンプル5 取り消し線

スタイルの組み合わせ

記号を組み合わせることで複数のスタイルを合わせて表現できる。

サンプル記述:文字スタイルの組み合わせ

**_サンプル1 太文字 + 斜め文字_**
***サンプル2 太文字 + 斜め文字***
__*サンプル3 太文字 + 斜め文字*__
___サンプル4 太文字 + 斜め文字___
~~***サンプル5 太文字 + 斜め文字***~~

実際にはこのように表現される。

サンプル1 太文字 + 斜め文字

サンプル2 太文字 + 斜め文字

サンプル3 太文字 + 斜め文字

サンプル4 太文字 + 斜め文字

サンプル5 太文字 + 斜め文字

参考リンク

help.hatenablog.com

help.github.com

daringfireball.net

ゼロから学ぶMarkdown 第1回 見出しの書き方

Markdown(マークダウン)はとてもシンプルな記述言語。文書を書くときの共通ルールみたいなもの。とにかくシンプルなのが特徴。Markdown対応のエディタを使えば文書が読みやすく表示されるので知っていると便利。今回は「見出しの書き方」を学ぶ。

見出しの書き方

タイトルの前に#(ハッシュ)を記述することで、見出しを表現できる。

サンプル記述:見出しの書き方

#サンプル見出し1
##サンプル見出し2
###サンプル見出し3
####サンプル見出し4
#####サンプル見出し5
######サンプル見出し6

実際にはこのように表現される。

サンプル見出し1

サンプル見出し2

サンプル見出し3

サンプル見出し4

サンプル見出し5
サンプル見出し6

見出し記述の注意点

表現できる見出しのレベルは#(ハッシュ)を6つまで。 と、言われることもある。しかし記載できる場合もある。表示するエディタ環境に依存する場合があるため、 使用しないほうが無難だと思われる。

サンプル記述:見出しレベル7

#######サンプル見出しレベル7

見出しレベル7を表現すると下記のようになる。

#サンプル見出しレベル7

参考リンク

help.hatenablog.com

help.github.com

daringfireball.net