目次

Table of Contents

@[toc]

@[toc]

📝 Block Elements

1. p
2. p

aaaaa

col1col2col3
aqa
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つ、あるいはダッシュ~3つで囲みます。

print 'hoge'

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

```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.js
function 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-1
    2. 番号付きリスト1-2
  2. 番号付きリスト2
  3. 番号付きリスト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 alignRight alignCenter align
ThisThisThis
columncolumncolumn
willwillwill
bebebe
leftrightcenter
alignedalignedaligned

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

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

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

📝 Emoji

:
See emojione 

😃 😄 😆 😇 🤤

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

👍 👎 👐 🙌 👉

🍎 🍏 🍓 🍰 🍔

🏀 🏈 ⚾ 🏐 🎱

♥️ 💔 💓 💗 💟

⌚ ⚙️ 💎 🔧 ✉️

📝 Math

See MathJax .

Inline Formula

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

The Lorenz Equations

x˙=σ(yx)y˙=ρxyxzz˙=βz+xy\begin{align} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{align}

The Cauchy-Schwarz Inequality

(k=1nakbk) ⁣ ⁣2(k=1nak2)(k=1nbk2)\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

V1×V2=ijkXuYu0XvYv0\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 (k)\left(k\right) heads when flipping (n)\left(n\right) coins is:

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

An Identity of Ramanujan

1(ϕ5ϕ)e25π=1+e2π1+e4π1+e6π1+e8π1+\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+q2(1q)+q6(1q)(1q2)+=j=01(1q5j+2)(1q5j+3),for q<1.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

×B1cEt=4πcjE=4πρ×E+1cBt=0B=0\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>

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.

Footnotes

  1. 1つめの脚注への参照です。

  2. 脚注を複数ブロックで書く例です。

    後続の段落はインデントされて、前の脚注に属します。

  3. 1つめの脚注への参照です。hoge