📝 Block Elements

1. p
2. p

col1	col2	col3
a	q	a
test	田中

Headers 見出し

先頭に#をレベルの数だけ記述します。

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

見出し3

見出し4

見出し5

見出し6

Block 段落

空白行を挟むことで段落となります。aaaa

段落1
(空行)
段落2

段落1

段落2

段落3

Br 改行

改行の前に半角スペースを2つ記述します。
この挙動は、オプションで変更可能です

hoge
fuga(スペース2つ)
piyo

hoge
fuga
piyo

Blockquotes 引用

先頭に>を記述します。ネストは>を多重に記述します。

> 引用
> 引用
>> 多重引用

引用
引用

多重引用

Code コード

`バッククオート` 3つ、あるいはダッシュ~３つで囲みます。

print 'hoge'

シンタックスハイライトとファイル名

highlight.js Demo の common カテゴリ内の言語に対応しています

```javascript:mersenne-twister.js
function MersenneTwister(seed) {
  if (arguments.length == 0) {
    seed = new Date().getTime();
  }

  this._mt = new Array(624);
  this.setSeed(seed);
}
```

mersenne-twister.jsfunction MersenneTwister(seed) {
  if (arguments.length == 0) {
    seed = new Date().getTime();
  }

  this._mt = new Array(624);
  this.setSeed(seed);
}

インラインコード

`バッククオート` で単語を囲むとインラインコードになります。

これは `インラインコード`です。

これは インラインコードです。

pre 整形済みテキスト

半角スペース4個もしくはタブで、コードブロックをpre表示できます

    class Hoge
        def hoge
            print 'hoge'
        end
    end

class Hoge
    def hoge
        print 'hoge'
    end
end

Hr 水平線

アンダースコア_ 、アスタリスク*を3つ以上連続して記述します。

***
___
---

📝 Typography

強調

em

アスタリスク*もしくはアンダースコア_1個で文字列を囲みます。

これは *イタリック* です
これは _イタリック_ です

これは イタリック です
これは イタリック です

strong

アスタリスク*もしくはアンダースコア_2個で文字列を囲みます。

これは **ボールド** です
これは __ボールド__ です

これは ボールド です
これは ボールド です

em + strong

アスタリスク*もしくはアンダースコア_3個で文字列を囲みます。

これは ***イタリック＆ボールド*** です
これは ___イタリック＆ボールド___ です

これは イタリック＆ボールド です
これは イタリック＆ボールド です

📝 Images

![Alt文字列](URL) で<img>タグを挿入できます。

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Minion
Stormtroopocat

画像の大きさなどの指定をする場合はimgタグを使用します。

<img src="https://octodex.github.com/images/dojocat.jpg" width="200px">

📝 Link

Markdown 標準

[表示テキスト](URL)でリンクに変換されます。

[Google](https://www.google.co.jp/)

Google

Crowi 互換

[/Sandbox]
&lt;/user/admin1>

[/Sandbox]
</user/admin1>

Pukiwiki like linker

(available by weseek/growi-plugin-pukiwiki-like-linker
)

最も柔軟な Linker です。
記述中のページを基点とした相対リンクと、表示テキストに対するリンクを同時に実現できます。

[[./Bootstrap3]]
Bootstrap3のExampleは[[こちら>./Bootstrap3]]

../user
Bootstrap3のExampleはこちら

📝 Lists

Ul 箇条書きリスト

ハイフン-、プラス+、アスタリスク*のいずれかを先頭に記述します。
ネストはタブで表現します。

- リスト1
    - リスト1_1
        - リスト1_1_1
        - リスト1_1_2
    - リスト1_2
- リスト2
- リスト3

リスト1
- リスト1_1
  - リスト1_1_1
  - リスト1_1_2
- リスト1_2
リスト2
リスト3

Ol 番号付きリスト

番号.を先頭に記述します。ネストはタブで表現します。
番号は自動的に採番されるため、すべての行を1.と記述するのがお勧めです。

1. 番号付きリスト1
    1. 番号付きリスト1-1
    1. 番号付きリスト1-2
1. 番号付きリスト2
1. 番号付きリスト3

番号付きリスト1
1. 番号付きリスト1-1
2. 番号付きリスト1-2
番号付きリスト2
番号付きリスト3

タスクリスト

- [ ] タスク 1
    - [x] タスク 1.1
    - [ ] タスク 1.2
- [x] タスク2

タスク 1
- タスク 1.1
- タスク 1.2
タスク2

📝 Table

Markdown 標準

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       | This        | This         |
| column     | column      | column       |
| will       | will        | will         |
| be         | be          | be           |
| left       | right       | center       |
| aligned    | aligned     | aligned      |

OR

Left align | Right align | Center align
:--|--:|:-:
This       | This        | This
column     | column      | column
will       | will        | will
be         | be          | be
left       | right       | center
aligned    | aligned     | aligned

Left align	Right align	Center align
This	This	This
column	column	column
will	will	will
be	be	be
left	right	center
aligned	aligned	aligned

TSV (crowi-plus 独自記法)

::: tsv
Content Cell 	Content Cell
Content Cell 	Content Cell
:::

::: tsv
Content Cell Content Cell
Content Cell Content Cell
:::

TSV ヘッダ付き (crowi-plus 独自記法)

::: tsv-h
First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell
:::

::: tsv-h
First Header Second Header
Content Cell Content Cell
Content Cell Content Cell
:::

CSV (crowi-plus 独自記法)

::: csv
Content Cell,Content Cell
Content Cell,Content Cell
:::

::: csv
Content Cell,Content Cell
Content Cell,Content Cell
:::

CSV ヘッダ付き (crowi-plus 独自記法)

::: csv-h
First Header,Second Header
Content Cell,Content Cell
Content Cell,Content Cell
:::

::: csv-h
First Header,Second Header
Content Cell,Content Cell
Content Cell,Content Cell
:::

📝 Footnote

脚注への参照¹を書くことができます。また、インラインの脚注^[インラインで記述できる脚注です]を入れる事も出来ます。

長い脚注は²のように書くことができます。³

📝 Emoji

:
See emojione

😃 😄 😆 😇 🤤

👨‍👩‍👦 :family_man_boy: :family_man_girl: :family_man_girl_girl: :family_woman_girl_girl:

👍 👎 👐 🙌 👉

🍎 🍏 🍓 🍰 🍔

🏀 🏈 ⚾ 🏐 🎱

♥️ 💔 💓 💗 💟

⌚ ⚙️ 💎 🔧 ✉️

📝 Math

See MathJax .

Inline Formula

When $a \ne 0$ , there are two solutions to (ax^2 + bx + c = 0) and they are
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$

The Lorenz Equations

\begin{align} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{align}

The Cauchy-Schwarz Inequality

\left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)

A Cross Product Formula

\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix}

The probability of getting $\left(k\right)$ heads when flipping $\left(n\right)$ coins is:

P(E) = {n \choose k} p^k (1-p)^{ n-k}

An Identity of Ramanujan

\frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } }

A Rogers-Ramanujan Identity

1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for $|q|<1$}.

Maxwell's Equations

\begin{align} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{align}

📝 UML Diagrams

See PlantUML .

シーケンス図

@startuml
skinparam sequenceArrowThickness 2
skinparam roundcorner 20
skinparam maxmessagesize 60
skinparam sequenceParticipant underline

actor User
participant "First Class" as A
participant "Second Class" as B
participant "Last Class" as C

User -> A: DoWork
activate A

A -> B: Create Request
activate B

B -> C: DoWork
activate C
C --> B: WorkDone
destroy C

B --> A: Request Created
deactivate B

A --> User: Done
deactivate A

@enduml

クラス図

@startuml

class BaseClass

namespace net.dummy #DDDDDD {
.BaseClass <|-- Person
Meeting o-- Person

.BaseClass <|- Meeting

}

namespace net.foo {
net.dummy.Person <|- Person
.BaseClass <|-- Person

net.dummy.Meeting o-- Person
}

BaseClass <|-- net.unused.Person

@enduml

コンポーネント図

@startuml

package "Some Group" {
HTTP - [First Component]
[Another Component]
}

node "Other Groups" {
FTP - [Second Component]
[First Component] --> FTP
}

cloud {
[Example 1]
}

database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}

[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]

@enduml

ステート図

@startuml
scale 600 width

[] -> State1
State1 --> State2 : Succeeded
State1 --> [] : Aborted
State2 --> State3 : Succeeded
State2 --> [] : Aborted
state State3 {
state "Accumulate Enough Data\nLong State Name" as long1
long1 : Just a test
[] --> long1
long1 --> long1 : New Data
long1 --> ProcessData : Enough Data
}
State3 --> State3 : Failed
State3 --> [] : Succeeded / Save Result
State3 --> [] : Aborted

@enduml

📝 blockdiag2

See blockdiag .

blockdiag2

::: blockdiag
blockdiag {
A -> B -> C -> D;
A -> E -> F -> G;
}
:::

seqdiag

::: seqdiag
seqdiag {
browser -> webserver [label = "GET /index.html"];
browser <-- webserver;
browser -> webserver [label = "POST /blog/comment"];
webserver -> database [label = "INSERT comment"];
webserver <-- database;
browser <-- webserver;
}
:::

actdiag

::: actdiag
actdiag {
write -> convert -> image

lane user {
label = "User"
write [label = "Writing reST"];
image [label = "Get diagram IMAGE"];
}
lane actdiag {
convert [label = "Convert reST to Image"];
}
}
:::

nwdiag

::: nwdiag
nwdiag {
network dmz {
address = "210.x.x.x/24"

  web01 [address = "210.x.x.1"];
  web02 [address = "210.x.x.2"];

}
network internal {
address = "172.x.x.x/24";

  web01 [address = "172.x.x.1"];
  web02 [address = "172.x.x.2"];
  db01;
  db02;

}
}
:::

rackdiag

::: rackdiag
rackdiag {
// define height of rack
8U;

// define rack items
1: UPS [2U];
3: DB Server
4: Web Server
5: Web Server
6: Web Server
7: Load Balancer
8: L3 Switch
}
:::

packetdiag

::: packetdiag
packetdiag {
colwidth = 32
node_height = 72

0-15: Source Port
16-31: Destination Port
32-63: Sequence Number
64-95: Acknowledgment Number
96-99: Data Offset
100-105: Reserved
106: URG [rotate = 270]
107: ACK [rotate = 270]
108: PSH [rotate = 270]
109: RST [rotate = 270]
110: SYN [rotate = 270]
111: FIN [rotate = 270]
112-127: Window
128-143: Checksum
144-159: Urgent Pointer
160-191: (Options and Padding)
192-223: data [colheight = 3]
}
:::

Labels

Default
Primary
Success
Info
Warning
Danger

Alerts

<div class="alert alert-success" role="alert"><b>Well done!</b> You successfully read this important alert message. </div>
<div class="alert alert-info" role="alert"><b>Heads up!</b> This alert needs your attention, but it's not super important. </div>
<div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
<div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Panels

Panel heading without title

Panel content

Panel heading without title

Panel content

Panel heading without title

Panel content

Panel heading without title

Panel content

Panel heading without title

Panel content

Panel heading without title

Panel content

Helper classes

Contextual colors

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Contextual backgrounds

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

1つめの脚注への参照です。 ↩
脚注を複数ブロックで書く例です。

後続の段落はインデントされて、前の脚注に属します。 ↩
1つめの脚注への参照です。hoge ↩

目次

Table of Contents

📝 Block Elements

Headers 見出し

見出し3

見出し4

見出し5

見出し6

Block 段落

Br 改行

Blockquotes 引用

Code コード

シンタックスハイライトとファイル名

インラインコード

pre 整形済みテキスト

Hr 水平線

📝 Typography

強調

em

strong

em + strong

📝 Images

📝 Link

Markdown 標準

Crowi 互換

Pukiwiki like linker

📝 Lists

Ul 箇条書きリスト

Ol 番号付きリスト

タスクリスト

📝 Table

Markdown 標準

TSV (crowi-plus 独自記法)

TSV ヘッダ付き (crowi-plus 独自記法)

CSV (crowi-plus 独自記法)

CSV ヘッダ付き (crowi-plus 独自記法)

📝 Footnote

📝 Emoji

📝 Math

Inline Formula

The Lorenz Equations

The Cauchy-Schwarz Inequality

A Cross Product Formula

The probability of getting (k)\left(k\right)(k) heads when flipping (n)\left(n\right)(n) coins is:

An Identity of Ramanujan

A Rogers-Ramanujan Identity

Maxwell's Equations

📝 UML Diagrams

シーケンス図

クラス図

コンポーネント図

ステート図

📝 blockdiag2

blockdiag2

seqdiag

actdiag

nwdiag

rackdiag

packetdiag

Labels

Alerts

Panels

Helper classes

Contextual colors

Contextual backgrounds

Footnotes

The probability of getting $\left(k\right)$ heads when flipping $\left(n\right)$ coins is: