目次
Table of Contents
@[toc]
@[toc]
📝 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つ、あるいはダッシュ~
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

で<img>
タグを挿入できます。
 
画像の大きさなどの指定をする場合はimgタグを使用します。
<img src="https://octodex.github.com/images/dojocat.jpg" width="200px">

📝 Link
Markdown 標準
[表示テキスト](URL)
でリンクに変換されます。
[Google](https://www.google.co.jp/)
Crowi 互換
[/Sandbox] </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
- リスト1_1
- リスト2
- リスト3
Ol 番号付きリスト
番号.
を先頭に記述します。ネストはタブで表現します。
番号は自動的に採番されるため、すべての行を1.と記述するのがお勧めです。
1. 番号付きリスト1 1. 番号付きリスト1-1 1. 番号付きリスト1-2 1. 番号付きリスト2 1. 番号付きリスト3
- 番号付きリスト1
- 番号付きリスト1-1
- 番号付きリスト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
脚注への参照1を書くことができます。また、インラインの脚注^[インラインで記述できる脚注です]を入れる事も出来ます。
📝 Emoji
:
See emojione
😃 😄 😆 😇 🤤
👨👩👦 :family_man_boy: :family_man_girl: :family_man_girl_girl: :family_woman_girl_girl:
👍 👎 👐 🙌 👉
🍎 🍏 🍓 🍰 🍔
🏀 🏈 ⚾ 🏐 🎱
♥️ 💔 💓 💗 💟
⌚ ⚙️ 💎 🔧 ✉️
📝 Math
See MathJax .
Inline Formula
When , there are two solutions to (ax^2 + bx + c = 0) and they are
The Lorenz Equations
The Cauchy-Schwarz Inequality
A Cross Product Formula
The probability of getting heads when flipping coins is:
An Identity of Ramanujan
A Rogers-Ramanujan Identity
Maxwell's Equations
📝 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
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.