# マークダウン
## マークダウン（Markdown）とは？
2004年、 ジョン・グル―バー(John Gruber)とアーロン・スワーツ(Aaron Swartz)により考案されたマークアップ言語の一つで、読みやすく書きやすいテキストフォーマットです。
このページの左枠は、マークダウンエディタです。**自由に練習しましょう** 皆様が練習した内容は他の人に表示されず、保存されません。
以下のリンクをクリックすると、該当のヘルプ（練習帳）にすぐに移動できます。
* [段落](#paragraph)
* [見出し](#heading)
* [引用](#blockquote)
* [強調](#emphasis)
* [取り消し線](#strike)
* [リスト](#list)
* [タスクリスト](#tasklist)
* [リンク](#link)
* [表](#table)
* [コードフォーマット](#code)
* [数式](#math)
* [UML](#uml)
----
## 段落
文章の間に一行以上の空き行を入れると段落を分けることができます。
マークダウン編集モードでは、空行を複数入力しても1行のみ適用されます。次の例題をみると、左のエディタには空行が3行ありますが、右の画面には空行が1行のみ反映されていることが分かります。
----
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur eros lorem, laoreet in enim at, sodales tempor quam. Etiam sit amet mattis ligula. Suspendisse accumsan orci sed leo aliquet, eget posuere neque iaculis.
----
## 見出し
行の最初に「#」をつけると見出しになります。「#」を重複して使うことで下位の見出しを作成できます。
`＃`の後にスペースを1つ入れることを注意してください。次の例では、スペースを入れずにタイトルを入力したので、文字が大きく見えません。
----
#no_space
----
# 一番目の見出し
## 二番目の見出し
### 三番目の見出し
#### 四番目の見出し
##### 五番目の見出し
###### 六番目の見出し
----
## 引用
文章の前に「>」を付けることで引用文を表示できます。引用文の二番目の行からは「>」を付けなくても結構です。
----
> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur eros lorem, laoreet in enim at, sodales tempor quam. Etiam sit amet mattis ligula.
Etiam sit amet mattis ligula. - someone
----
但し、引用文の段落が複数である場合は、空行にも「>」を付ける必要があります。
----
> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur eros lorem, laoreet in enim at, sodales tempor quam. Etiam sit amet mattis ligula.
>
> Etiam sit amet mattis ligula. - someone
----
## 強調
**ボールド**または*斜体*で文章を強調できます。文章の前後に「*」または「_」を1回（斜体）もしくは2回（ボールド）入力して囲むと反映されます。
----
**この文章はボールドで表示されます。**
*この文章は斜体で表示されます。*
**ボールドと*斜体*を組み合わせることもできます。**
__この文章もボールドで表示されます。__
_この文章も斜体で表示されます。_
----
## 取り消し線
文字や文章の前後を「~~」で囲むことで取り消し線を表示できます。
---
~~この文章には取り消し線が表示されます。~~
---
## リスト
### 順番のないリスト
文章の最初に空白なく「*」または「-」を入力すると順番のないリストを作成できます。「*」の前には空白を入れてはいけませんが、「*」の後には空白を入れる必要があります。もし、「*」の次に空白を入れない場合は、強調として認識される場合があります。
---
*no_space
---
* item
* item
* item
- item
- item
- item
---
### 順番があるリスト
文字の前に数字を入力すると、順番があるリストを作成できます。順番とは関係なく、入力するだけで自動的に数字が付きます。
---
1. 一番
2. 二番
3. 三番
1. 一番
1. 二番
1. 三番
---
### 重複したリスト
2マスをインデントして入力するか「TAB」を入力することで重複したリストを作成できます。逆に、アウトデントの場合は「Shift+TAB」を入力します。
---
1. 一番目のリスト
1. 一番目の一番目のリスト
1. 一番目の二番目のリスト
1. 二番目のリスト
- 二番目の順番のないリスト
- 二回重複した順番のないリスト
- 何回でも重複できます。
1. 三番目のリスト
---
## タスクリスト
本文に簡易タスクリストを作成できます。エディタ画面ではなく、表示画面でチェックボックスにチェックをクリックすると、クリックした状態がそのまま保存されます。
---
買い物
- [x] 卵
- [ ] にんじん
- [ ] 牛乳
---
## リンク
### 一般リンク
画面に表意する内容は、「[]（大括弧）」で囲み、移動するURLには「()（括弧）」で囲んで入力すると自動的にリンクを作成できます。
次の例題のようによく知られているタイプについては、自動的にリンクが作成されることもあります。
---
[Dooray!](https://dooray.com/)
https://dooray.com/
---
### 業務参照
Dooray! Projectタスクリンクを入力するときも使用できます。ブラウザーURLのタスクリンクを入力する時にも使用できます。ブラウザーのURLを利用することより有効です。
エディタで「[」を入力すると表示されるメニューから「タスク参照」を選択します。最近閲覧したタスクが先に表示されます。その中から選択することも、キーワードを入力し希望するタスクを探して選択することも可能です。
### 画像
画像は、リンクの前に「!｣をつけると作成できます。
## 表
最初の行は「-」（ハイフン）で、各列は「|」（垂直記号）で区分し表を作成できます。
一列目の見出し | 二列目の見出し
----------|-----------
内容 | 内容
内容 | 内容
行の最初と最後に「|」入れることも可能です。
| 一列目の見出し | 二列目の見出し |
| ----------|-----------|
| 内容 | 内容 |
| 内容 | 内容 |
「-」と「|」の列を揃える必要はありません。
| 名前 | 説明 |
|--------|-------|
| メッセージ | メッセージを確認できます。 |
| 下書き | 作成中に下書きに保存された内容を確認できます。 |
表内で強調線、取り消し線なども使用できます。
| 名前 | 説明 |
|--------|-------|
| メッセージ | **メッセージ**を確認できます。 |
| 下書き | 作成中に*下書き*に保存された内容を~~確認~~できます。 |
しかし、セルをまたがって使用することはできません。
| 名前 | 説明 |
|--------|-------|
| **メッセージ | メッセージ**を確認できます。 |
| ~~下書き | 作成中に~~下書き*に保存された内容を確認できます。 |
表内で「-」（ハイフン）と「:」（コロン）を使用し、並べ替えを合わせることができます。
| 左寄せ | 中央寄せ | 右寄せ |
|:------|:----:|-----:|
| 1234 | 1234 | 1234 |
| 123 | 123 | 123 |
| 12 | 12 | 12 |
セルの結合機能は、現在、開発中です。
## コードフォーマット
プログラムソースコードのための表記です。次の方法で固定幅のフォントと背景色でテキストや段落を強調できます。
### インラインフォーマット
文章の中のプログラムコードを「` ` ``」（抑音符号）で囲んで表示できます。また、`` ` ``の間の文章は、入力した通り表示されます。
---
Lorem ipsum dolor sit amet, `var a = new Message();` consectetur adipiscing elit. Curabitur eros lorem, laoreet in enim at, sodales tempor quam. Etiam sit amet mattis ligula.
`ここに入力した文章は、**ボールド**または*斜体*で表示されません。`
---
### マルチライン
三つの抑音符号（`` ``` ``）を使用すると、独立したブロックでテキストのフォーマットを設定できます。
```
var message = 'hooray!';
console.log(message.replace(/^h/, 'D'));
```
どのプログラミング言語なのかも指定できます。
```javascript
var message = 'hooray!';
console.log(message.replace(/^h/, 'D'));
```
```java
String message = 'Dooray!';
```
## LaTex 数式
LaTex文法の数式を作成することができます。
---
```math
f(x) = \int_{-\infty}^\infty
\hat f(\xi),e^{2 \pi i \xi x}
,d\xi
```
---
## UML
SW開発で使用するUMLを内容を記述する形で作成できます。
次の例を参考にした上で、詳しくはDooray!のPlantUMLのサイトからご確認ください。（例題は、PlantUMLのサイトから引用しました。）
http://plantuml.com/
### Sequence Diagram
http://plantuml.com/sequence-diagram
```uml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
```
### UseCase Diagram
http://plantuml.com/use-case-diagram
```uml
:Main Admin: as Admin
(Use the application) as (Use)
User -> (Start)
User --> (Use)
Admin ---> (Use)
note right of Admin : This is an example.
note right of (Use)
A note can also
be on several lines
end note
note "This note is connected\nto several objects." as N2
(Start) .. N2
N2 .. (Use)
```
### Class Diagram
http://plantuml.com/class-diagram
```uml
Object <|-- Dummy
class Dummy {
String data
void methods()
-field1
#field2
~method1()
+method2()
}
class Flight {
flightNumber : Integer
departureTime : Date
}
class Car
Driver - Car : drives >
Car *- Wheel : have 4 >
Car -- Person : < owns
```
### Activity Diagram
http://plantuml.com/activity-diagram-beta
```uml
start
partition Initialization {
:read config file;
:init internal variable;
}
partition Running {
if (multiprocessor?) then (yes)
fork
:Treatment 1;
fork again
:Treatment 2;
detach
end fork
else (monoproc)
:Treatment 1;
:Treatment 2;
endif
}
stop
```
### Component Diagram
http://plantuml.com/component-diagram
```uml
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]
```
### State Diagram
http://plantuml.com/state-diagram
```uml
[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string
State1 -> State2
State2 --> [*]
```
```uml
scale 350 width
[*] --> NotShooting
state NotShooting {
[*] --> Idle
Idle --> Configuring : EvConfig
Configuring --> Idle : EvConfig
}
state Configuring {
[*] --> NewValueSelection
NewValueSelection --> NewValuePreview : EvNewValue
NewValuePreview --> NewValueSelection : EvNewValueRejected
NewValuePreview --> NewValueSelection : EvNewValueSaved
state NewValuePreview {
State1 -> State2
}
}
```