【備忘録】Markdown記法 チートシート

## コードブロック

**▼書き方**

~~~
```kotlin:sample.kt
print("sample")
```
~~~

**▼結果**

```kotlin:sample.kt
print("sample")
```

### diff

**▼書き方**

~~~
```diff_kotlin
- print("AAA")
+ print("BBB")
print("CCC")
```
~~~

**▼結果**

```diff_kotlin
- print("AAA")
+ print("BBB")
print("CCC")
```

## インライン

**▼書き方**

```
`インライン`
```

**▼結果**

`インライン`

### カラーインライン

**▼書き方**

```
`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`
```

**▼結果**

`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`

## 見出し

**▼書き方**

```
# H1タグ
## H2タグ
### H3タグ
#### H4タグ
##### H5タグ
###### H6タグ
```

**▼結果**

# H1タグ
## H2タグ
### H3タグ
#### H4タグ
##### H5タグ
###### H6タグ


## 太字・斜体・打ち消し線

**▼書き方**

```
**太字**
*斜体*
~~打ち消し~~
```

**▼結果**

**太字**
*斜体*
~~打ち消し~~

## 折りたたみ

**▼書き方**

~~~
<details><summary>sample</summary>

```kotlin:sample.kt
print("sample")
```
</details>
~~~

**▼結果**

<details><summary>sample</summary>

```kotlin:sample.kt
print("sample")
```
</details>

## 補足説明

**▼書き方**

```
:::note info
sample
info
:::

:::note warn
sample
warn
:::

:::note alert
sample
alert
:::
```

**▼結果**

:::note info
sample
info
:::

:::note warn
sample
warn
:::

:::note alert
sample
alert
:::

## リスト

### 順序なしリスト

**▼書き方**

```
- AAA
- BBB
```

**▼結果**

- AAA
- BBB

### 番号付きリスト

**▼書き方**

```
1. AAA
1. BBB
1. CCC
```

**▼結果**

1. AAA
1. BBB
1. CCC

### チェックボックス

**▼書き方**

```
- [x] AAA
- [ ] BBB
```

**▼結果**

- [x] AAA
- [ ] BBB

## 引用

**▼書き方**

```
> AAA
> BBB
>
> > CCC
```

**▼結果**

> AAA
> BBB
>
> > CCC

## 水平線

**▼書き方**

```
---
```

**▼結果**

---

## カラー文字

**▼書き方**

```
<font color="Red">赤文字</font>
```

**▼結果**

<font color="Red">赤文字</font>

## リンク

**▼書き方**

```
[Qiita](http://qiita.com)
```

**▼結果**

[Qiita](http://qiita.com)

### 参照リンク

**▼書き方**

```
[AAA][Qiita] と [BBB][Qiita] は同一リンク
[Qiita]も同様

[Qiita]: http://qiita.com
```

**▼結果**

[AAA][Qiita] と [BBB][Qiita] は同一リンク
[Qiita]も同様

[Qiita]: http://qiita.com


## 画像埋め込み


**▼書き方**

```
![Qiita](https://pictogram2.com/p/p0056/1.png)
```

**▼結果**

![](https://pictogram2.com/p/p0056/1.png)



### 画像埋め込み（サイズ調整）

**▼書き方**

```
<img width="200" src="https://pictogram2.com/p/p0056/1.png">
```

**▼結果**

<img width="200" src="https://pictogram2.com/p/p0056/1.png">


## テーブル

### 自動生成

**▼書き方**

```
3x2
```
上記のように入力すると、「テーブルを挿入」と表示されるので、そのタイミングでEnterを押下するとテーブルが自動生成される

**▼結果**

| 1 | 2 | 3 |
|:-:|:-:|:-:|
|   |   |   |
|   |   |   |

## 数式の挿入

**▼書き方**

~~~
```math
f'(x) = \frac{df}{dx}
```
~~~

**▼結果**

```math
f'(x) = \frac{df}{dx}
```


### 行中に式を埋め込む

**▼書き方**

```
sample: $\int_0^n f(x) dx$
```

**▼結果**

sample: $\int_0^n f(x) dx$

## リンクカード

**▼書き方**

```

https://qiita.com

```

**▼結果**

https://qiita.com

## ダイアグラム

### [PlantUML](https://plantuml.com/ja)

**▼書き方**

~~~
```plantuml
A->B : sample
```
~~~

**▼結果**

```plantuml
A->B : sample
```

### [Mermaid](https://mermaid-js.github.io/mermaid)

**▼書き方**

~~~
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
~~~

**▼結果**

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

## 脚注

**▼書き方**

```
脚注を用意する[^1]。

[^1]: フッターに表示される
```

**▼結果(フッターに表示される)**

脚注を用意する[^1]。

[^1]: フッターに表示される

## エスケープ

**▼書き方**

```
\# H1タグ
```

**▼結果**

\# H1

## 参考文献

[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)