# かんたんMarkdownの記法

## 見出し
先頭に`# `をつけることによって見出しになります。見出しのレベルは`#`の数で表現します。

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

## 段落
空行を挟むことで段落となります。
```
段落1
(空行)
段落2
```

段落1

段落2

## 改行
改行の前に半角スペースを2つ記述することで改行されます。
```
hoge
fuga(スペース2つ)
piyo
```

hoge
fuga  
piyo

あるいはHTMLを使って改行することも可能です。

```html
hoge<br>
huga
```
hoge<br>
huga

## コード
バッククオート(` ` `)3つ、あるいはダッシュ`~`３つで囲むことで、コードを挿入できます。

~~~
```
print "hoge"
```
~~~

```
print "hoge"
```

Standardバージョン以上であれば、始まりのバッククオート、ダッシュの直後に言語名を記述することで、シンタックスハイライトします。

~~~
```python
print "hoge"
```
~~~
```python
print "hoge"
```

## インラインコード
バッククオートで単語を囲むとインラインコードなります。
```
2行目の`print`関数を見てください
```

2行目の`print`関数を見てください

## テキスト装飾
マークダウン記法、あるいはHTMLでテキストを装飾できます。
```
これは*イタリック*です  
これは**ボールド**です  
これは***イタリック＆ボールド***です  
これは~~打消し線~~です  
これは<sup>上付き</sup>です  
これは<sub>下付き</sub>です
```

これは*イタリック*です  
これは**ボールド**です  
これは***イタリック＆ボールド***です  
これは~~打消し線~~です  
これは<sup>上付き</sup>です  
これは<sub>下付き</sub>です

## リスト(箇条書き)
`* `, `+`あるいは`- `を先頭に記述することで箇条書きになります。ネストはタブで表現します。
```
* リスト1
* リスト2
	* リスト3
		* リスト4
```
* リスト1
* リスト2
	* リスト3
		* リスト4

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

```
1. 番号付きリスト1
1. 番号付きリスト2
1. 番号付きリスト3
	1. 番号付きリスト4
		1. 番号付きリスト5
		1. 番号付きリスト6
	1. 番号付きリスト7
```
1. 番号付きリスト1
1. 番号付きリスト2
1. 番号付きリスト3
	1. 番号付きリスト4
		1. 番号付きリスト5
		1. 番号付きリスト6
	1. 番号付きリスト7

## 引用
`>`を先頭に記述することで引用となります。ネストは`>`を多重に記述します。

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

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

## 水平線(hr)
`-`や`_`を３つ以上並べると水平線に変換されます。

```
---
hoge
- - - - - - - -
fuga
_ _ _ _ _ _ _ _
piyo
<hr>
```
---
hoge
- - - - - - - -
fuga
_ _ _ _ _ _ _ _
piyo
<hr>

## リンク
`[リンク文字列](URL)`でリンクに変換されます。

```
[google](http://www.google.co.jp/)
```
[google](http://www.google.co.jp/)

リンク先を添付ファイルにすると、そのファイルをダウンロードするリンクを作ることができます。

```
[猫画像をDL](attach:cat.jpg)
```
[猫画像をDL](attach:cat.jpg)

## 外部参照リンク
以下のように、URLを外部に定義することもできます。URLが長くて読みづらくなる場合に有用です。
```
[yahoo japan][yahoo]
[yahoo]: http://www.yahoo.co.jp
```

[yahoo japan][yahoo]
[yahoo]: http://www.yahoo.co.jp

## 画像
添付画像は`<img src="attach:画像名">`で挿入できます。

```
<img src="attach:cat.jpg">
```

通常のMarkdown記法でも挿入可能です。ただし、その場合は横幅などの属性指定はできません

```
![alt](画像URL)
```

（例省略）

## テーブル（表）
テーブルは以下のように記述します。

```
これは     | 一番
-----------| ------------
シンプルな | テーブルです
```

これは     | 一番
-----------| ------------
シンプルな | テーブルです

枠をつけても構いません。

```
|枠を   | つけても |
|-------|----------|
|意味は | 同じです |
```

|枠を   | つけても |
|-------|----------|
|意味は | 同じです |

`:`を使うと文字を揃えることができます。

```
| 左揃え | 中央揃え | 右揃え |
|:-------|:--------:|-------:|
|1       |2         |3       |
|4       |5         |6       |
```
| 左揃え | 中央揃え | 右揃え |
|:-------|:--------:|-------:|
|1       |2         |3       |
|4       |5         |6       |

## 注釈
Markdownには注釈の記法がありませんが、HTMLを使うことで注釈に近いことが実現可能です。

```
注釈のようなことを実現可能です<sup>[1](#note1)</sup>

<small id="note1">無理やりですが</small>
```

注釈のようなことを実現可能です<sup>[1](#note1)</sup>

<small id="note1">無理やりですが</small>

## info, warn, alert
`info`, `warn`そして`alert`クラスを用いることで青色、黄色、赤色の枠を使った表現が可能です。
（これはMarkdown記法ではなく、かんたんMarkdown独自の記法です。）

```
<p class="info">**ポイント** ちょっとした情報です。</p>
<p class="warn">**注意** 気をつけてください</p>
<p class="alert">**警告** 細心の注意を払ってください</p>
```
<p class="info">**ポイント** ちょっとした情報です。</p>
<p class="warn">**注意** 気をつけてください</p>
<p class="alert">**警告** 細心の注意を払ってください</p>

## シーケンス図（Fullエディションのみ）
`sequence`クラスを使うと、js-sequence-diagramsを利用してシーケンス図を記述することができます。

```
<div class="sequence">
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
</div>
```

<div class="sequence">
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
</div>

js-sequence-diagramsの記法は[公式ページ](https://bramp.github.io/js-sequence-diagrams/)をご覧ください。

## フローチャート（Fullエディションのみ）
`flow`クラスを使うとflowchart.jsを利用してフローチャートを記述することができます。

```
<div class="flow">
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
</div>
```

<div class="flow">
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
</div>

flowchart.jsの記法は[公式ページ](https://adrai.github.io/flowchart.js/)をご覧ください。

/*
 * CSSの設定を間違えると、最悪の場合
 * 内容を編集できなくなるので注意してください。
 * 標準のCSSに戻したいときはCSSを引き継がずに強制アップデートしてください
 * また、CSSの変更はプレビューしないと反映しません。
 */
 
.previewMode #previewer {
    width: 980px;
}
#previewer {
    word-wrap: break-word;
    border: 1px solid gray;
    font-family: Helvetica, arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    background-color: white;
    padding: 45px;
}
#previewer > *:first-child {
    margin-top: 0 !important;
}
#previewer > *:last-child {
    margin-bottom: 0 !important;
}
a {
    color: #4183C4;
}
a.absent {
    color: #cc0000;
}
a.anchor {
    display: block;
    padding-left: 30px;
    margin-left: -30px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 20px 0 10px;
    padding: 0;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    cursor: text;
    position: relative;
}
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
    background: url("para.png") no-repeat 10px center;
    text-decoration: none;
}
h1 tt,
h1 code {
    font-size: inherit;
}
h2 tt,
h2 code {
    font-size: inherit;
}
h3 tt,
h3 code {
    font-size: inherit;
}
h4 tt,
h4 code {
    font-size: inherit;
}
h5 tt,
h5 code {
    font-size: inherit;
}
h6 tt,
h6 code {
    font-size: inherit;
}
h1 {
    font-size: 28px;
    color: black;
}
h2 {
    font-size: 24px;
    border-bottom: 1px solid #cccccc;
    color: black;
}
h3 {
    font-size: 18px;
}
h4 {
    font-size: 16px;
}
h5 {
    font-size: 14px;
}
h6 {
    color: #777777;
    font-size: 14px;
}
p,
blockquote,
ul,
ol,
dl,
li:first,
table,
pre {
    margin: 15px 0;
}
hr {
    background-color: #e7e7e7;
    border: 0 none;
    height: 4px;
    padding: 0;
}
#previewer > h2:first-child {
    margin-top: 0;
    padding-top: 0;
}
#previewer > h1:first-child {
    margin-top: 0;
    padding-top: 0;
}
#previewer > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0;
}
#previewer > h3:first-child,
#previewer > h4:first-child,
#previewer > h5:first-child,
#previewer > h6:first-child {
    margin-top: 0;
    padding-top: 0;
}
a:first-child h1,
a:first-child h2,
a:first-child h3,
a:first-child h4,
a:first-child h5,
a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
}
h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p {
    margin-top: 0;
}
li p.first {
    display: inline-block;
}
ul,
ol {
    padding-left: 30px;
}
ul:first-child,
ol:first-child {
    margin-top: 0;
}
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}
dl {
    padding: 0;
}
dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px;
}
dl dt:first-child {
    padding: 0;
}
dl dt >:first-child {
    margin-top: 0;
}
dl dt >:last-child {
    margin-bottom: 0;
}
dl dd {
    margin: 0 0 15px;
    padding: 0 15px;
}
dl dd >:first-child {
    margin-top: 0;
}
dl dd >:last-child {
    margin-bottom: 0;
}
blockquote {
    border-left: 4px solid #dddddd;
    padding: 0 15px;
    color: #777777;
}
blockquote >:first-child {
    margin-top: 0;
}
blockquote >:last-child {
    margin-bottom: 0;
}
table {
    border-collapse: collapse;
    padding: 0;
}
table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0;
}
table tr:nth-child(2n) {
    background-color: #f8f8f8;
}
table tr th {
    font-weight: bold;
    border: 1px solid #cccccc;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}
table tr td {
    border: 1px solid #cccccc;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}
table tr th:first-child,
table tr td:first-child {
    margin-top: 0;
}
table tr th:last-child,
table tr td:last-child {
    margin-bottom: 0;
}
img {
    max-width: 100%;
}
span.frame {
    display: block;
    overflow: hidden;
}
span.frame > span {
    border: 1px solid #dddddd;
    display: block;
    float: left;
    overflow: hidden;
    margin: 13px 0 0;
    padding: 7px;
    width: auto;
}
span.frame span img {
    display: block;
    float: left;
}
span.frame span span {
    clear: both;
    color: #333333;
    display: block;
    padding: 5px 0 0;
}
span.align-center {
    display: block;
    overflow: hidden;
    clear: both;
}
span.align-center > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: center;
}
span.align-center span img {
    margin: 0 auto;
    text-align: center;
}
span.align-right {
    display: block;
    overflow: hidden;
    clear: both;
}
span.align-right > span {
    display: block;
    overflow: hidden;
    margin: 13px 0 0;
    text-align: right;
}
span.align-right span img {
    margin: 0;
    text-align: right;
}
span.float-left {
    display: block;
    margin-right: 13px;
    overflow: hidden;
    float: left;
}
span.float-left span {
    margin: 13px 0 0;
}
span.float-right {
    display: block;
    margin-left: 13px;
    overflow: hidden;
    float: right;
}
span.float-right > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: right;
}
code,
tt {
    margin: 0 2px;
    padding: 0 5px;
    white-space: nowrap;
    border: 1px solid #eaeaea;
    background-color: #f8f8f8;
    border-radius: 3px;
}
pre code {
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    border: none;
    background: transparent;
}
.highlight pre {
    background-color: #f8f8f8;
    border: 1px solid #cccccc;
    font-size: 13px;
    line-height: 19px;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 3px;
}
pre {
    background-color: #f8f8f8;
    border: 1px solid #cccccc;
    font-size: 13px;
    line-height: 19px;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 3px;
}
pre code,
pre tt {
    background-color: transparent;
    border: none;
}
.sequence,
.flow {
    overflow: auto;
}
.info {
    color: #3a87ad;
    background-color: #d9edf7;
    border: 1px solid #bce8f1;
    font-size: 13px;
    line-height: 19px;
    padding: 6px 10px;
    border-radius: 0px;
    margin: 1em 0px 1em;
}
.warn {
    color: #c09853;
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    font-size: 13px;
    line-height: 19px;
    padding: 6px 10px;
    border-radius: 0px;
    margin: 1em 0px 1em;
}
.alert {
    color: #b94a48;
    background-color: #f2dede;
    border: 1px solid #eed3d7;
    font-size: 13px;
    line-height: 19px;
    padding: 6px 10px;
    border-radius: 0px;
    margin: 1em 0px 1em;
}
@media print {
    nav {
        display: none;
    }
    #wrapper {
        overflow: visible;
    }
    #previewer {
        border: 0;
    }
}
/* START_HLJS_CSS */
/*

github.com style (c) Vasily Polovnyov <vast@whiteants.net>

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}

.hljs-comment,
.hljs-quote {
  color: #998;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #333;
  font-weight: bold;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
  color: #008080;
}

.hljs-string,
.hljs-doctag {
  color: #d14;
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
  color: #900;
  font-weight: bold;
}

.hljs-subst {
  font-weight: normal;
}

.hljs-type,
.hljs-class .hljs-title {
  color: #458;
  font-weight: bold;
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
  color: #000080;
  font-weight: normal;
}

.hljs-regexp,
.hljs-link {
  color: #009926;
}

.hljs-symbol,
.hljs-bullet {
  color: #990073;
}

.hljs-built_in,
.hljs-builtin-name {
  color: #0086b3;
}

.hljs-meta {
  color: #999;
  font-weight: bold;
}

.hljs-deletion {
  background: #fdd;
}

.hljs-addition {
  background: #dfd;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}
/* END_HLJS_CSS */

Markdown
CSS

かんたんMarkdownの記法

見出し

先頭に#をつけることによって見出しになります。見出しのレベルは#の数で表現します。

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

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

段落

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

段落1
(空行)
段落2

段落1

段落2

改行

改行の前に半角スペースを2つ記述することで改行されます。

hoge
fuga(スペース2つ)
piyo

hoge fuga
piyo

あるいはHTMLを使って改行することも可能です。

hoge<br>
huga

hoge
huga

コード

バッククオート(` )3つ、あるいはダッシュ~３つで囲むことで、コードを挿入できます。

```
print "hoge"
```

print "hoge"

Standardバージョン以上であれば、始まりのバッククオート、ダッシュの直後に言語名を記述することで、シンタックスハイライトします。

```python
print "hoge"
```

print "hoge"

インラインコード

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

2行目の`print`関数を見てください

2行目のprint関数を見てください

テキスト装飾

マークダウン記法、あるいはHTMLでテキストを装飾できます。

これは*イタリック*です  
これは**ボールド**です  
これは***イタリック＆ボールド***です  
これは~~打消し線~~です  
これは<sup>上付き</sup>です  
これは<sub>下付き</sub>です

これはイタリックです
これはボールドです
これはイタリック＆ボールドです
これは~~打消し線~~です
これは^上付きです
これは_下付きです

リスト(箇条書き)

*, +あるいは-を先頭に記述することで箇条書きになります。ネストはタブで表現します。

* リスト1
* リスト2
    * リスト3
        * リスト4

リスト1
リスト2
- リスト3
  - リスト4

番号付きリスト

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

1. 番号付きリスト1
1. 番号付きリスト2
1. 番号付きリスト3
    1. 番号付きリスト4
        1. 番号付きリスト5
        1. 番号付きリスト6
    1. 番号付きリスト7

番号付きリスト1
番号付きリスト2
番号付きリスト3
1. 番号付きリスト4
  1. 番号付きリスト5
  2. 番号付きリスト6
2. 番号付きリスト7

引用

>を先頭に記述することで引用となります。ネストは>を多重に記述します。

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

引用
引用

多重引用

水平線(hr)

-や_を３つ以上並べると水平線に変換されます。

---
hoge
- - - - - - - -
fuga
_ _ _ _ _ _ _ _
piyo
<hr>

hoge

fuga

piyo

リンク

[リンク文字列](URL)でリンクに変換されます。

[google](http://www.google.co.jp/)

google

リンク先を添付ファイルにすると、そのファイルをダウンロードするリンクを作ることができます。

[猫画像をDL](attach:cat.jpg)

猫画像をDL

外部参照リンク

以下のように、URLを外部に定義することもできます。URLが長くて読みづらくなる場合に有用です。

[yahoo japan][yahoo]
[yahoo]: http://www.yahoo.co.jp

yahoo japan

画像

添付画像は<img src="attach:画像名">で挿入できます。

<img src="attach:cat.jpg">

通常のMarkdown記法でも挿入可能です。ただし、その場合は横幅などの属性指定はできません

![alt](画像URL)

（例省略）

テーブル（表）

テーブルは以下のように記述します。

これは     | 一番
-----------| ------------
シンプルな | テーブルです

これは	一番
シンプルな	テーブルです

枠をつけても構いません。

|枠を   | つけても |
|-------|----------|
|意味は | 同じです |

枠を	つけても
意味は	同じです

:を使うと文字を揃えることができます。

| 左揃え | 中央揃え | 右揃え |
|:-------|:--------:|-------:|
|1       |2         |3       |
|4       |5         |6       |

左揃え	中央揃え	右揃え
1	2	3
4	5	6

注釈

Markdownには注釈の記法がありませんが、HTMLを使うことで注釈に近いことが実現可能です。

注釈のようなことを実現可能です<sup>[1](#note1)</sup>

<small id="note1">無理やりですが</small>

注釈のようなことを実現可能です¹

無理やりですが

info, warn, alert

info, warnそしてalertクラスを用いることで青色、黄色、赤色の枠を使った表現が可能です。（これはMarkdown記法ではなく、かんたんMarkdown独自の記法です。）

<p class="info">**ポイント** ちょっとした情報です。</p>
<p class="warn">**注意** 気をつけてください</p>
<p class="alert">**警告** 細心の注意を払ってください</p>

ポイント ちょっとした情報です。

注意気をつけてください

警告細心の注意を払ってください

シーケンス図（Fullエディションのみ）

sequenceクラスを使うと、js-sequence-diagramsを利用してシーケンス図を記述することができます。

<div class="sequence">
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
</div>

js-sequence-diagramsの記法は公式ページをご覧ください。

フローチャート（Fullエディションのみ）

flowクラスを使うとflowchart.jsを利用してフローチャートを記述することができます。

<div class="flow">
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
</div>

flowchart.jsの記法は公式ページをご覧ください。