#49
Markdown記法
#49

Public Markdown記法

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>タグをご利用下さい :pray:

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

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

$p^{foo}_{i_{bar}}$

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

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

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

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円

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

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

↓

アイテム名 値段
いぬの
えさ		 250円
とりの
えさ		 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>
ID Item
1 いぬのえさ
1 いぬのえさ

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

折りたたみ

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

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

- ここは折りたたまれる
    - foo
    - bar
</details>
詳細
  • ここは折りたたまれる
    • foo
    • bar

タスクリスト

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

↓

  • TODO
    • TODO
  • DONE

絵文字

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

また、:@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]: ここに脚注の内容を書きます

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

Referenced from

help/README
help/esa.io グッズSHOP

Comments0