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\\}$

    $p^{foo}\_{i\_{bar}}$
$p^{foo}\_{i\_{bar}}$

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

デフォルトで以下のパラメータが指定されています。

```
skinparam monochrome true
scale max 1024 width
```

以下のように、`skinparam monochrome false` を指定すると色がついた表示になります。

    ```uml
    skinparam monochrome false

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

```uml
skinparam monochrome false

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

セル内で改行したい場合は、`<br>` タグをご利用下さい。

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

↓

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

セル内はデフォルトは左寄せですが、ヘッダー行との区切りを`:---:` や `---:` のようにすると中央揃え、右寄せができます

```
| アイテム名 | 値段 | 備考 |
| --- | :---: | ---: | 
| いぬのえさ | 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>

- ここは折りたたまれる
    - foo
    - bar
</details>
```

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

- ここは折りたたまれる
    - 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)