Updated at 2024-10-31 11:23
越川 直人
いくつかの解説の修正と記法の追加をしました
Updated by ppworks 2019-02-21 14:11:50 +0900
  • esa.io の Markdown 記法のうち、よく使うものを紹介します
  • esa.io の [Markdown 記法](https://docs.esa.io/posts/290)のうち、よく使うものを紹介します
  • # 見出し
  • `#` を行頭に付けることで、見出しになります。 `#` の数と見出しの階層が対応します。
  • 行頭に`#`、半角スペース、文字列の順に記述することで、見出しになります。 `#` の数と見出しのレベルが対応します。
  • ```
  • # これは h1 タグです
  • ## これは h2 タグです
  • ### これは h3 タグです
  • #### これは h4 タグです
  • ```
  • # これは h1 タグです
  • ## これは h2 タグです
  • ### これは h3 タグです
  • #### これは h4 タグです
  • # 箇条書き
  • 箇条書きリストは、 `-` `*` のどれかを入力し、半角スペースまたはタブを挿入します。
  • 半角スペースまたはタブを行頭に挿入すると、箇条書きが入れ子になります。
  • 半角スペースを2つ以上またはタブを行頭に挿入すると、箇条書きが入れ子になります。
  • ```
  • - リスト 1
  • - リスト 2
  • - リスト 2a
  • - リスト 2a1
  • - リスト 2b
  • ```
  • - リスト 1
  • - リスト 2
  • - リスト 2a
  • - リスト 2a1
  • - リスト 2b
  • # 番号付きリスト
  • 番号付きリストは、 `<数字>.`を入力し、半角スペースまたはタブを挿入します。どの数字を入力しても、番号付けは自動で行われます。
  • 半角スペースまたはタブを行頭に挿入すると、リストが入れ子になります。
  • 番号付きリストは、 `<数字>.`または`<数字>)`を入力し、半角スペースを挿入します。番号付けは最初に指定した数字から自動で行われます。
  • 半角スペースを2つ以上またはタブを行頭に挿入すると、リストが入れ子になります。
  • ```
  • 1. foo
  • 2. foo
  • 1. bar
  • 1. baz
  • 1. aaa
  • 2. bbb
  • 3. ccc
  • 1) bbb
  • 1. ccc
  • ```
  • 1. foo
  • 2. foo
  • 1. bar
  • 1. baz
  • 1. aaa
  • 2. bbb
  • 3. ccc
  • 1) bbb
  • 1. ccc
  • # リンク
  • `[表示テキスト](URL)` でリンクになります
  • ```
  • [esa.io (\\( ⁰⊖⁰)/) ](https://esa.io)
  • ```
  • [esa.io (\\( ⁰⊖⁰)/) ](https://esa.io)
  • # 画像
  • `![代替テキスト](画像URL)` で画像が貼れます
  • ```
  • ![patapata (\\( ⁰⊖⁰)/)](https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif)
  • ```
  • ![patapata (\\( ⁰⊖⁰)/)](https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif)
  • サイズを指定したい場合は`<img>`タグをご利用下さい :pray:
  • ```
  • <img src="https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif" alt="小さくpatapata (\\( ⁰⊖⁰)/)" width="32" height="32" />
  • ```
  • <img src="https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif" alt="小さくpatapata (\\( ⁰⊖⁰)/)" width="32" height="32" />
  • # 引用
  • 行頭に `>` を挿入すると引用(blockquote)として表示できます。
  • ```
  • esa.io にはこのように書いてあります。
  • > esa.io は「情報を育てる」という視点で作られた、
  • > 小さな開発チームのためのドキュメント共有サービスです。
  • ```
  • esa.io にはこのように書いてあります。
  • > esa.io は「情報を育てる」という視点で作られた、
  • > 小さな開発チームのためのドキュメント共有サービスです。
  • # 強調(太字)
  • 2つの `*` または、`_`で文言を囲むと、強調(太字・strong)が表現できます。
  • ```
  • それは私の**エサ**です。
  • ```
  • それは私の**エサ**です。
  • # 訂正線
  • 2つの `~`で文言を囲むと、訂正線(`del`)が表現できます。
  • ```
  • それは~~いぬ~~トリのエサです。
  • ```
  • それは~~いぬ~~トリのエサです。
  • # 罫線
  • 3つ以上の `*` `-` と半角スペースのみの行は、罫線 (`hr`) として表現できます。
  • ```
  • 本文終わり。
  • ---
  • Enjoy! (\\( ⁰⊖⁰)/) from esa.io
  • ```
  • 本文終わり。
  • ---
  • Enjoy! (\\( ⁰⊖⁰)/)
  • # コード
  • ## インライン表示
  • ```
  • インラインのコードは、`<code>` タグです。
  • ```
  • インラインのコードは、`<code>` タグです。
  • ## コードブロック表示
  • <pre>
  • ```
  • $ git push origin master
  • ```
  • </pre>
  • ```
  • $ git push origin master
  • ```
  • ## シンタックスハイライト
  • <pre>
  • ```ruby
  • def esa
  • puts "(\\( ⁰⊖⁰)/)"
  • end
  • ```
  • </pre>
  • ```ruby
  • def esa
  • puts "(\\( ⁰⊖⁰)/)"
  • end
  • ```
  • ※現在 esaでは [rouge](https://github.com/jneen/rouge)というライブラリを使用しております。対応言語一覧は[こちら](https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers)です。
  • ## ファイル名表示
  • <pre>
  • ```ruby:Gemfile
  • gem 'rails'
  • gem 'esa'
  • ```
  • ```ruby:tori.rb
  • puts '(\( ⁰⊖⁰)/)'
  • ```
  • </pre>
  • ```ruby:Gemfile
  • gem 'rails'
  • gem 'esa'
  • ```
  • ```ruby:tori.rb
  • puts '(\( ⁰⊖⁰)/)'
  • ```
  • ## 数式
  • ### mathコードブロック
  • ```math
  • e^{i \pi} = -1
  • ```
  • ```math
  • e^{i \pi} = -1
  • ```
  • ### inlineMath
  • $a = \\{1, 2, 3\\}$
  • $a = \\{1, 2, 3\\}$
  • # UML ([PlantUML](http://plantuml.com/))
  • PlantUML記法を利用すると、シーケンス図などのUMLダイアグラムをesaの記事に埋め込むことが出来ます。
  • ```uml
  • Alice -> Bob: Authentication Request
  • Bob --> Alice: Authentication Response
  • Alice -> Bob: Another authentication Request
  • Alice <-- Bob: another authentication Response
  • ```
  • ```uml
  • Alice -> Bob: Authentication Request
  • Bob --> Alice: Authentication Response
  • Alice -> Bob: Another authentication Request
  • Alice <-- Bob: another authentication Response
  • ```
  • # [Mermaid](https://mermaidjs.github.io/)
  • Mermaid記法を利用すると、ガントチャートなどをesaの記事に埋め込むことが出来ます。
  • ```mermaid
  • gantt
  • title A Gantt Diagram
  • dateFormat YYYY-MM-DD
  • section Section
  • A task :a1, 2014-01-01, 30d
  • Another task :after a1 , 20d
  • section Another
  • Task in sec :2014-01-12 , 12d
  • another task : 24d
  • ```
  • ```mermaid
  • gantt
  • title A Gantt Diagram
  • dateFormat YYYY-MM-DD
  • section Section
  • A task :a1, 2014-01-01, 30d
  • Another task :after a1 , 20d
  • section Another
  • Task in sec :2014-01-12 , 12d
  • another task : 24d
  • ```
  • # テーブル
  • ```
  • | アイテム名 | 値段 |
  • | ------------ | ------------- |
  • | いぬのえさ | 250円 |
  • | とりのえさ | 128円 |
  • ```
  • ※ テーブル記法の前の行は空行である必要があります。
  • | アイテム名 | 値段 |
  • | ------------ | ------------- |
  • | いぬのえさ | 250円 |
  • | とりのえさ | 128円 |
  • 列の幅を指定したい場合には、`<table>`タグをご利用下さい :pray:
  • ```
  • <table>
  • <tr><th width="20">ID</th><th width="780">Item</th></tr>
  • <tr><td>1</td><td>いぬのえさ</td></tr>
  • <tr><td>1</td><td>いぬのえさ</td></tr>
  • </table>
  • ```
  • <table>
  • <tr><th width="40">ID</th><th width="760">Item</th></tr>
  • <tr><td>1</td><td>いぬのえさ</td></tr>
  • <tr><td>1</td><td>いぬのえさ</td></tr>
  • </table>
  • :bulb: 参考: [release_note/2015/01/24/テーブル記法を書きやすくしました - docs.esa.io](https://docs.esa.io/posts/54)
  • # 折りたたみ
  • `<details>`タグをご利用いただくことで記事の一部を折りたたむことが可能です。中にMarkdownを記述する際には、空行を1つはさんで下さい。
  • ```
  • <details><summary>詳細</summary>
  • # aaa
  • - foo
  • - bar
  • </details>
  • ```
  • <details><summary>詳細</summary>
  • # aaa
  • - foo
  • - bar
  • </details>
  • # タスクリスト
  • ```
  • - [ ] TODO
  • - [ ] TODO
  • - [x] DONE
  • ```
  • - [ ] TODO
  • - [ ] TODO
  • - [x] DONE
  • # 絵文字
  • `:emoji:` で、絵文字が表示できます。詳しくは[Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) 参照下さい :sushi: :hatched_chick: :bird:
  • 絵文字は投稿タイトルや見出しでも利用できます。
  • 絵文字は投稿タイトルや見出しでも利用できます。チームに絵文字を追加する際には、「[カスタム絵文字が使えるようになりました](https://docs.esa.io/posts/226)」を参照下さい。
  • また、`:@USERNAME:`で、メンバーの絵文字が表示できます。
  • :@ppworks: Hello
  • # メンション
  • `@USERNAME` でユーザーに対してメンションが送れます。メンションが送られると画面右上の通知欄から通知されます。
  • `@`を入力すると、チーム内のメンバーがサジェストされます。
  • ![スクリーンショット 2015-01-18 21.40.14.png](https://img.esa.io/uploads/production/pictures/105/3222/image/e89349da4600b6f4967462773d803384.png)
  • # チーム内投稿へのリンク
  • `#` から入力すると、チーム内の投稿がサジェストされ、楽にリンクが投稿できます。
  • ![スクリーンショット 2015-01-18 21.44.12.png](https://img.esa.io/uploads/production/pictures/105/3223/image/84cc4697e5ffb7110f31597fff1a2fb8.png)
  • # エスケープ
  • `\ ` でMakdownで使われる記号がエスケープできます。
  • ```
  • \# ほげ
  • \- hoge
  • \\hoge
  • (\\( ⁰⊖⁰)/)
  • ```
  • \# ほげ
  • \- hoge
  • \\hoge
  • (\\( ⁰⊖⁰)/)
  • # 脚注記法
  • `脚注を付けたい場所にこのように書きます→ [^1]`
  • `[^1]: ここに脚注の内容を書きます`
  • :bulb: 参考: [#38: release_note/2014/12/24/脚注記法に対応しました :christmas_tree: :santa:](/posts/38)

esa.io の Markdown 記法のうち、よく使うものを紹介しますMarkdown 記法のうち、よく使うものを紹介します。

見出し

#を行頭に付けることで、見出しになります。行頭に#の数と見出しの階層が対応します。、半角スペース、文字列の順に記述することで、見出しになります。 の数と見出しのレベルが対応します。

# これは h1 タグです
## これは h2 タグです
### これは h3 タグです
#### これは h4 タグです

これは h1 タグです

これは h2 タグです

これは h3 タグです

これは h4 タグです

箇条書き

箇条書きリストは、 - * のどれかを入力し、半角スペースまたはタブを挿入します。
半角スペースまたはタブを行頭に挿入すると、箇条書きが入れ子になります。半角スペースを2つ以上またはタブを行頭に挿入すると、箇条書きが入れ子になります。

-  リスト 1
-  リスト 2
    -  リスト 2a
         -  リスト 2a1
    -  リスト 2b

  • リスト 1
  • リスト 2
    • リスト 2a
      • リスト 2a1
    • リスト 2b

番号付きリスト

番号付きリストは、 <数字>.を入力し、半角スペースまたはタブを挿入します。どの数字を入力しても、番号付けは自動で行われます。または
<数字>)半角スペースまたはタブを行頭に挿入すると、リストが入れ子になります。を入力し、半角スペースを挿入します。番号付けは最初に指定した数字から自動で行われます。 半角スペースを2つ以上またはタブを行頭に挿入すると、リストが入れ子になります。

1. foo
1. bar
1. baz
    1. aaa
    2. bbb
    3. ccc
2. foo
1. bar
1. baz
    1. aaa
    1) bbb
    1. ccc

  1. foo
  2. bar
  3. baz
    1. aaa
    2. bbb
    3. ccc
  1. foo
  2. bar
  3. baz
    1. aaa
    1. bbb
    1. ccc

リンク

[表示テキスト](URL) でリンクになります

[esa.io (\\( ⁰⊖⁰)/) ](https://esa.io)


esa.io (\( ⁰⊖⁰)/)

画像

![代替テキスト](画像URL) で画像が貼れます

![patapata (\\( ⁰⊖⁰)/)](https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif)

patapata (\( ⁰⊖⁰)/)

<img src="https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif" alt="小さくpatapata (\\( ⁰⊖⁰)/)" width="32" height="32" />
小さくpatapata (\\( ⁰⊖⁰)/)

引用

行頭に > を挿入すると引用(blockquote)として表示できます。

esa.io にはこのように書いてあります。

> esa.io は「情報を育てる」という視点で作られた、 
> 小さな開発チームのためのドキュメント共有サービスです。


esa.io にはこのように書いてあります。

esa.io は「情報を育てる」という視点で作られた、
小さな開発チームのためのドキュメント共有サービスです。

強調(太字)

2つの * または、_で文言を囲むと、強調(太字・strong)が表現できます。

それは私の**エサ**です。


それは私のエサです。

訂正線

2つの ~で文言を囲むと、訂正線(del)が表現できます。

それは~~いぬ~~トリのエサです。


それはいぬトリのエサです。

罫線

3つ以上の * - と半角スペースのみの行は、罫線 (hr) として表現できます。

本文終わり。

---

Enjoy! (\\( ⁰⊖⁰)/) from esa.io


本文終わり。


Enjoy! (\( ⁰⊖⁰)/)

コード

インライン表示

インラインのコードは、`<code>` タグです。


インラインのコードは、<code> タグです。

コードブロック表示

```
$ git push origin master
```

$ git push origin master

シンタックスハイライト

```ruby
def esa
  puts "(\\( ⁰⊖⁰)/)"
end
```

ruby
def esa
  puts "(\\( ⁰⊖⁰)/)"
end

※現在 esaでは rougeというライブラリを使用しております。対応言語一覧はこちらです。

ファイル名表示

```ruby:Gemfile
gem 'rails'
gem 'esa'
```

```ruby:tori.rb
puts '(\( ⁰⊖⁰)/)'
```

Gemfile
gem 'rails'
gem 'esa'
tori.rb
puts '(\( ⁰⊖⁰)/)'

数式

mathコードブロック

```math
 e^{i \pi} = -1 
```
$$ e^{i \pi} = -1 $$

inlineMath

$a = \\{1, 2, 3\\}$

$a = \{1, 2, 3\}$

UML (PlantUML)

PlantUML記法を利用すると、シーケンス図などのUMLダイアグラムをesaの記事に埋め込むことが出来ます。

```uml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
```

UML

UML

テーブル

Mermaid

Mermaid記法を利用すると、ガントチャートなどをesaの記事に埋め込むことが出来ます。

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d

テーブル

| アイテム名 | 値段 |
| ------------ | ------------- |
| いぬのえさ | 250円 |
| とりのえさ | 128円 |

※ テーブル記法の前の行は空行である必要があります。

アイテム名 値段
いぬのえさ 250円
とりのえさ 128円

列の幅を指定したい場合には、<table>タグをご利用下さい 🙏

<table>
  <tr><th width="20">ID</th><th width="780">Item</th></tr>
  <tr><td>1</td><td>いぬのえさ</td></tr>
   <tr><td>1</td><td>いぬのえさ</td></tr>
</table>
ID Item
1 いぬのえさ
1 いぬのえさ

💡 参考: release_note/2015/01/24/テーブル記法を書きやすくしました - docs.esa.io

タスクリスト

折りたたみ

<details>タグをご利用いただくことで記事の一部を折りたたむことが可能です。中にMarkdownを記述する際には、空行を1つはさんで下さい。

<details><summary>詳細</summary>

# aaa
- foo
- bar
</details>
詳細

aaa

  • foo
  • bar

タスクリスト

- [ ] TODO
    - [ ] TODO
- [x] DONE

  • TODO
    • TODO
  • DONE

絵文字

絵文字

:emoji:<img>で、絵文字が表示できます。詳しくはサイズを指定したい場合はEmoji cheat sheet参照下さいタグをご利用下さい🍣 🐥 🐦
絵文字は投稿タイトルや見出しでも利用できます。🙏

:emoji: で、絵文字が表示できます。詳しくはEmoji cheat sheet 参照下さい 🍣 🐥 🐦
絵文字は投稿タイトルや見出しでも利用できます。チームに絵文字を追加する際には、「カスタム絵文字が使えるようになりました」を参照下さい。

メンション

また、:@USERNAME:で、メンバーの絵文字が表示できます。

:@ppworks: Hello

メンション

@USERNAME でユーザーに対してメンションが送れます。メンションが送られると画面右上の通知欄から通知されます。
@を入力すると、チーム内のメンバーがサジェストされます。

スクリーンショット 2015-01-18 21.40.14.png

チーム内投稿へのリンク

チーム内投稿へのリンク

# から入力すると、チーム内の投稿がサジェストされ、楽にリンクが投稿できます。

スクリーンショット 2015-01-18 21.44.12.png

エスケープ

エスケープ

\ でMakdownで使われる記号がエスケープできます。

\# ほげ

\- hoge

\\hoge

(\\( ⁰⊖⁰)/)

# ほげ

- hoge

\hoge

(\( ⁰⊖⁰)/)

脚注記法

脚注記法

脚注を付けたい場所にこのように書きます→ [^1]

[^1]: ここに脚注の内容を書きます

💡 参考: #38: release_note/2014/12/24/脚注記法に対応しました 🎄 🎅

esa.io の [Markdown 記法](https://docs.esa.io/posts/290)のうち、よく使うものを紹介します。

# 見出し

行頭に`#`、半角スペース、文字列の順に記述することで、見出しになります。 `#` の数と見出しのレベルが対応します。

```
# これは h1 タグです
## これは h2 タグです
### これは h3 タグです
#### これは h4 タグです
```
↓

# これは h1 タグです
## これは h2 タグです
### これは h3 タグです
#### これは h4 タグです

# 箇条書き

箇条書きリストは、 `-` `*` のどれかを入力し、半角スペースまたはタブを挿入します。
半角スペースを2つ以上またはタブを行頭に挿入すると、箇条書きが入れ子になります。

```
-  リスト 1
-  リスト 2
    -  リスト 2a
         -  リスト 2a1
    -  リスト 2b
```
↓
-  リスト 1
-  リスト 2
    -  リスト 2a
         -  リスト 2a1
    -  リスト 2b

# 番号付きリスト
番号付きリストは、 `<数字>.`または`<数字>)`を入力し、半角スペースを挿入します。番号付けは最初に指定した数字から自動で行われます。
半角スペースを2つ以上またはタブを行頭に挿入すると、リストが入れ子になります。

```
2. foo
1. bar
1. baz
    1. aaa
    1) bbb
    1. ccc
```

↓

2. foo
1. bar
1. baz
    1. aaa
    1) bbb
    1. ccc

# リンク

 `[表示テキスト](URL)` でリンクになります

```
[esa.io (\\( ⁰⊖⁰)/) ](https://esa.io)
```
↓ 
[esa.io (\\( ⁰⊖⁰)/) ](https://esa.io)

# 画像
`![代替テキスト](画像URL)` で画像が貼れます

```
![patapata (\\( ⁰⊖⁰)/)](https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif)
```
↓

![patapata (\\( ⁰⊖⁰)/)](https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif)

サイズを指定したい場合は`<img>`タグをご利用下さい :pray: 

```
<img src="https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif" alt="小さくpatapata (\\( ⁰⊖⁰)/)" width="32" height="32" />
```

<img src="https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif" alt="小さくpatapata (\\( ⁰⊖⁰)/)" width="32" height="32" />

# 引用

行頭に `>` を挿入すると引用(blockquote)として表示できます。 

```
esa.io にはこのように書いてあります。

> esa.io は「情報を育てる」という視点で作られた、 
> 小さな開発チームのためのドキュメント共有サービスです。

```
↓
esa.io にはこのように書いてあります。

> esa.io は「情報を育てる」という視点で作られた、 
> 小さな開発チームのためのドキュメント共有サービスです。

# 強調(太字)

2つの `*` または、`_`で文言を囲むと、強調(太字・strong)が表現できます。

```
それは私の**エサ**です。
```
↓
それは私の**エサ**です。

# 訂正線

2つの `~`で文言を囲むと、訂正線(`del`)が表現できます。

```
それは~~いぬ~~トリのエサです。
```
↓
それは~~いぬ~~トリのエサです。

# 罫線

3つ以上の `*` `-` と半角スペースのみの行は、罫線 (`hr`) として表現できます。

```
本文終わり。

---

Enjoy! (\\( ⁰⊖⁰)/) from esa.io
```
↓
本文終わり。

---

Enjoy! (\\( ⁰⊖⁰)/)


# コード

## インライン表示

```
インラインのコードは、`<code>` タグです。
```
↓
インラインのコードは、`<code>` タグです。

## コードブロック表示

<pre>
```
$ git push origin master
```

</pre>

↓
```
$ git push origin master
```
## シンタックスハイライト

<pre>
```ruby
def esa
  puts "(\\( ⁰⊖⁰)/)"
end
```

</pre>
↓

```ruby
def esa
  puts "(\\( ⁰⊖⁰)/)"
end
```

※現在 esaでは [rouge](https://github.com/jneen/rouge)というライブラリを使用しております。対応言語一覧は[こちら](https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers)です。

## ファイル名表示

<pre>

```ruby:Gemfile
gem 'rails'
gem 'esa'
```

```ruby:tori.rb
puts '(\( ⁰⊖⁰)/)'
```

</pre>

```ruby:Gemfile
gem 'rails'
gem 'esa'
```

```ruby:tori.rb
puts '(\( ⁰⊖⁰)/)'
```

## 数式

### mathコードブロック

    ```math
     e^{i \pi} = -1 
    ```

```math
 e^{i \pi} = -1 
```

### inlineMath

    $a = \\{1, 2, 3\\}$
$a = \\{1, 2, 3\\}$

# UML ([PlantUML](http://plantuml.com/))

PlantUML記法を利用すると、シーケンス図などのUMLダイアグラムをesaの記事に埋め込むことが出来ます。

    ```uml
    Alice -> Bob: Authentication Request
    Bob --> Alice: Authentication Response
    
    Alice -> Bob: Another authentication Request
    Alice <-- Bob: another authentication Response
    ```

```uml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
```

# [Mermaid](https://mermaidjs.github.io/)

Mermaid記法を利用すると、ガントチャートなどをesaの記事に埋め込むことが出来ます。

    ```mermaid
    gantt
        title A Gantt Diagram
        dateFormat  YYYY-MM-DD
        section Section
        A task           :a1, 2014-01-01, 30d
        Another task     :after a1  , 20d
        section Another
        Task in sec      :2014-01-12  , 12d
        another task      : 24d
    ```

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```

# テーブル

```
| アイテム名 | 値段 |
| ------------ | ------------- |
| いぬのえさ | 250円 |
| とりのえさ | 128円 |
```

※ テーブル記法の前の行は空行である必要があります。

↓

| アイテム名 | 値段 |
| ------------ | ------------- |
| いぬのえさ | 250円 |
| とりのえさ | 128円 |

列の幅を指定したい場合には、`<table>`タグをご利用下さい :pray: 

```
<table>
  <tr><th width="20">ID</th><th width="780">Item</th></tr>
  <tr><td>1</td><td>いぬのえさ</td></tr>
   <tr><td>1</td><td>いぬのえさ</td></tr>
</table>
```

<table>
  <tr><th width="40">ID</th><th width="760">Item</th></tr>
  <tr><td>1</td><td>いぬのえさ</td></tr>
   <tr><td>1</td><td>いぬのえさ</td></tr>
</table>


:bulb:  参考:  [release_note/2015/01/24/テーブル記法を書きやすくしました - docs.esa.io](https://docs.esa.io/posts/54)

# 折りたたみ

`<details>`タグをご利用いただくことで記事の一部を折りたたむことが可能です。中にMarkdownを記述する際には、空行を1つはさんで下さい。

```
<details><summary>詳細</summary>

# aaa
- foo
- bar
</details>
```

<details><summary>詳細</summary>

# aaa
- foo
- bar
</details>


# タスクリスト

```
- [ ] TODO
    - [ ] TODO
- [x] DONE
```
↓
- [ ] TODO
    - [ ] TODO
- [x] DONE

# 絵文字

`:emoji:` で、絵文字が表示できます。詳しくは[Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) 参照下さい :sushi: :hatched_chick: :bird:
絵文字は投稿タイトルや見出しでも利用できます。チームに絵文字を追加する際には、「[カスタム絵文字が使えるようになりました](https://docs.esa.io/posts/226)」を参照下さい。

また、`:@USERNAME:`で、メンバーの絵文字が表示できます。

↓

:@ppworks: Hello

# メンション

`@USERNAME` でユーザーに対してメンションが送れます。メンションが送られると画面右上の通知欄から通知されます。
`@`を入力すると、チーム内のメンバーがサジェストされます。

![スクリーンショット 2015-01-18 21.40.14.png](https://img.esa.io/uploads/production/pictures/105/3222/image/e89349da4600b6f4967462773d803384.png)  

# チーム内投稿へのリンク

`#` から入力すると、チーム内の投稿がサジェストされ、楽にリンクが投稿できます。

![スクリーンショット 2015-01-18 21.44.12.png](https://img.esa.io/uploads/production/pictures/105/3223/image/84cc4697e5ffb7110f31597fff1a2fb8.png)

# エスケープ

`\ ` でMakdownで使われる記号がエスケープできます。

```
\# ほげ

\- hoge

\\hoge

(\\( ⁰⊖⁰)/)
```
↓

\# ほげ

\- hoge

\\hoge

(\\( ⁰⊖⁰)/)

# 脚注記法

`脚注を付けたい場所にこのように書きます→ [^1]`

`[^1]: ここに脚注の内容を書きます`

:bulb:  参考: [#38: release_note/2014/12/24/脚注記法に対応しました :christmas_tree: :santa:](/posts/38) 

esa.io の Markdown 記法のうち、よく使うものを紹介します。

見出し

行頭に#、半角スペース、文字列の順に記述することで、見出しになります。 # の数と見出しのレベルが対応します。

# これは h1 タグです
## これは h2 タグです
### これは h3 タグです
#### これは h4 タグです

これは h1 タグです

これは h2 タグです

これは h3 タグです

これは h4 タグです

箇条書き

箇条書きリストは、 - * のどれかを入力し、半角スペースまたはタブを挿入します。
半角スペースを2つ以上またはタブを行頭に挿入すると、箇条書きが入れ子になります。

-  リスト 1
-  リスト 2
    -  リスト 2a
         -  リスト 2a1
    -  リスト 2b

  • リスト 1
  • リスト 2
    • リスト 2a
      • リスト 2a1
    • リスト 2b

番号付きリスト

番号付きリストは、 <数字>.または<数字>)を入力し、半角スペースを挿入します。番号付けは最初に指定した数字から自動で行われます。
半角スペースを2つ以上またはタブを行頭に挿入すると、リストが入れ子になります。

2. foo
1. bar
1. baz
    1. aaa
    1) bbb
    1. ccc

  1. foo
  2. bar
  3. baz
    1. aaa
    1. bbb
    1. ccc

リンク

[表示テキスト](URL) でリンクになります

[esa.io (\\( ⁰⊖⁰)/) ](https://esa.io)


esa.io (\( ⁰⊖⁰)/)

画像

![代替テキスト](画像URL) で画像が貼れます

![patapata (\\( ⁰⊖⁰)/)](https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif)

patapata (\( ⁰⊖⁰)/)

サイズを指定したい場合は<img>タグをご利用下さい 🙏

<img src="https://img.esa.io/uploads/production/pictures/105/3203/image/378bedb1186931ecfa019e92dafc1692.gif" alt="小さくpatapata (\\( ⁰⊖⁰)/)" width="32" height="32" />
小さくpatapata (\\( ⁰⊖⁰)/)

引用

行頭に > を挿入すると引用(blockquote)として表示できます。

esa.io にはこのように書いてあります。

> esa.io は「情報を育てる」という視点で作られた、 
> 小さな開発チームのためのドキュメント共有サービスです。


esa.io にはこのように書いてあります。

esa.io は「情報を育てる」という視点で作られた、
小さな開発チームのためのドキュメント共有サービスです。

強調(太字)

2つの * または、_で文言を囲むと、強調(太字・strong)が表現できます。

それは私の**エサ**です。


それは私のエサです。

訂正線

2つの ~で文言を囲むと、訂正線(del)が表現できます。

それは~~いぬ~~トリのエサです。


それはいぬトリのエサです。

罫線

3つ以上の * - と半角スペースのみの行は、罫線 (hr) として表現できます。

本文終わり。

---

Enjoy! (\\( ⁰⊖⁰)/) from esa.io


本文終わり。


Enjoy! (\( ⁰⊖⁰)/)

コード

インライン表示

インラインのコードは、`<code>` タグです。


インラインのコードは、<code> タグです。

コードブロック表示

```
$ git push origin master
```

$ git push origin master

シンタックスハイライト

```ruby
def esa
  puts "(\\( ⁰⊖⁰)/)"
end
```

ruby
def esa
  puts "(\\( ⁰⊖⁰)/)"
end

※現在 esaでは rougeというライブラリを使用しております。対応言語一覧はこちらです。

ファイル名表示


```ruby:Gemfile
gem 'rails'
gem 'esa'
```

```ruby:tori.rb
puts '(\( ⁰⊖⁰)/)'
```

Gemfile
gem 'rails'
gem 'esa'
tori.rb
puts '(\( ⁰⊖⁰)/)'

数式

mathコードブロック

```math
 e^{i \pi} = -1 
```
$$ e^{i \pi} = -1 $$

inlineMath

$a = \\{1, 2, 3\\}$

$a = \{1, 2, 3\}$

UML (PlantUML)

PlantUML記法を利用すると、シーケンス図などのUMLダイアグラムをesaの記事に埋め込むことが出来ます。

```uml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
```

UML

Mermaid

Mermaid記法を利用すると、ガントチャートなどをesaの記事に埋め込むことが出来ます。

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d

テーブル

| アイテム名 | 値段 |
| ------------ | ------------- |
| いぬのえさ | 250円 |
| とりのえさ | 128円 |

※ テーブル記法の前の行は空行である必要があります。

アイテム名 値段
いぬのえさ 250円
とりのえさ 128円

列の幅を指定したい場合には、<table>タグをご利用下さい 🙏

<table>
  <tr><th width="20">ID</th><th width="780">Item</th></tr>
  <tr><td>1</td><td>いぬのえさ</td></tr>
   <tr><td>1</td><td>いぬのえさ</td></tr>
</table>
ID Item
1 いぬのえさ
1 いぬのえさ

💡 参考: release_note/2015/01/24/テーブル記法を書きやすくしました - docs.esa.io

折りたたみ

<details>タグをご利用いただくことで記事の一部を折りたたむことが可能です。中にMarkdownを記述する際には、空行を1つはさんで下さい。

<details><summary>詳細</summary>

# aaa
- foo
- bar
</details>
詳細

aaa

  • foo
  • bar

タスクリスト

- [ ] TODO
    - [ ] TODO
- [x] DONE

  • TODO
    • TODO
  • DONE

絵文字

:emoji: で、絵文字が表示できます。詳しくはEmoji cheat sheet 参照下さい 🍣 🐥 🐦
絵文字は投稿タイトルや見出しでも利用できます。チームに絵文字を追加する際には、「カスタム絵文字が使えるようになりました」を参照下さい。

また、:@USERNAME:で、メンバーの絵文字が表示できます。

:@ppworks: Hello

メンション

@USERNAME でユーザーに対してメンションが送れます。メンションが送られると画面右上の通知欄から通知されます。
@を入力すると、チーム内のメンバーがサジェストされます。

スクリーンショット 2015-01-18 21.40.14.png

チーム内投稿へのリンク

# から入力すると、チーム内の投稿がサジェストされ、楽にリンクが投稿できます。

スクリーンショット 2015-01-18 21.44.12.png

エスケープ

\ でMakdownで使われる記号がエスケープできます。

\# ほげ

\- hoge

\\hoge

(\\( ⁰⊖⁰)/)

# ほげ

- hoge

\hoge

(\( ⁰⊖⁰)/)

脚注記法

脚注を付けたい場所にこのように書きます→ [^1]

[^1]: ここに脚注の内容を書きます

💡 参考: #38: release_note/2014/12/24/脚注記法に対応しました 🎄 🎅