🍥

Hugo Theme Stack Starter

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

# :pencil: Block Elements

# Headers 見出し

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

1
2
3
4
5
6


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

# 見出し3

# 見出し4

# 見出し5

# 見出し6

# Block 段落

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

1
2
3


段落1
(空行)
段落2

段落1

段落2

# Br 改行

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

1
2
3


hoge
fuga(スペース2つ)
piyo

hoge fuga piyo

# Blockquotes 引用

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

1
2
3


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

引用引用

多重引用

# Code コード

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

1

print 'hoge'

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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

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

1
2
3
4
5
6
7
8


function MersenneTwister(seed) {
  if (arguments.length == 0) {
    seed = new Date().getTime();
  }

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

# インラインコード

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

1

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

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

# pre 整形済みテキスト

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

1
2
3
4
5


    class Hoge
        def hoge
            print 'hoge'
        end
    end

class Hoge
    def hoge
        print 'hoge'
    end
end

# Hr 水平線

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

1
2
3


***
___
---

# :pencil: Typography

# 強調

# em

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

1
2


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

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

# strong

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

1
2


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

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

# em + strong

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

1
2


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

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

# :pencil: Images

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

1
2


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

Minion Stormtroopocat

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

1

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

# :pencil: Link

# Markdown 標準

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

1

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

Google

# Crowi 互換

1
2


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

[/Sandbox] </user/admin1>

# Pukiwiki like linker

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

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

1
2


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

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

# :pencil: Lists

# Ul 箇条書きリスト

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

1
2
3
4
5
6
7


- リスト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
2
3
4
5


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

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

# タスクリスト

1
2
3
4


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

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

# :pencil: Table

# Markdown 標準

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


| 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 独自記法)

1
2
3
4


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

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

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

1
2
3
4
5


::: 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 独自記法)

1
2
3
4


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

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

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

1
2
3
4
5


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

# :pencil: Footnote

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

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

# :pencil: Emoji

See emojione

:smiley: :smile: :laughing: :innocent: :drooling_face:

:family: :family_man_boy: :family_man_girl: :family_man_girl_girl: :family_woman_girl_girl:

:thumbsup: :thumbsdown: :open_hands: :raised_hands: :point_right:

:apple: :green_apple: :strawberry: :cake: :hamburger:

:basketball: :football: :baseball: :volleyball: :8ball:

:hearts: :broken_heart: :heartbeat: :heartpulse: :heart_decoration:

:watch: :gear: :gem: :wrench: :envelope:

# :pencil: 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} $$

# :pencil: 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

# :pencil: blockdiag

See blockdiag.

# blockdiag

::: 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] } :::

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

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