よく使うMarkdown記法自分用メモ

## 前提
Qiitaで記事を書き始めたのでMarkdown記法のメモ
自分用によく使うものやテンプレ用にここに残そうと思います
主にプログラム関連のものになりそう

Qiitaで「記事を新規作成」すると右側にMarkdownの書き方のサンプルがあります
![スクリーンショット 2024-02-05 4.42.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535004/de6d86a0-81ce-13ef-782d-8a4de9fc3aa7.png)

https://qiita.com/Qiita/items/c686397e4a0f4f11683d

公式のMarkdown記法もあります細かい書き方はこちらから

## まずはこれ
コマンド補完機能
とりあえず`/`コマンドを入力する超便利
下記の表示の感じで直ぐに呼び出せるショートカット
codeblockはソースコードを書くのによく使うのでこれだけでも覚えておく

```
codeblock
コードブロックを挿入します
```

:::note alert
alert
警告の補足説明を挿入します
:::

:::note warn
warn
注意の補足説明を挿入します
:::

:::note info
info
補足説明を挿入します
:::

<!--
commentout
コメントアウトを挿入します
-->

<details><summary>details:折りたたみを挿入します</summary>
details
折りたたみを挿入します
</details>


## よく使うMarkdown記法

### コードブロック

ソースコードやコマンド書く時使う一番使うので必須
`/`コマンドでも「codeblock」を選択して直ぐに呼び出せる
~~~:```
```ruby:qiita.rb
puts 'ruby:qiita.rb のように 「言語 : タイトル」 を入れると言語に合わせてシンタックスハイライトになる模様'
```
~~~


```:~~~
~~~:書き方
「`」か「~」のどちらかでこのようにコードブロックでかける
~~~
```

![スクリーンショット 2024-02-05 5.21.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535004/0f81ff68-9067-22a8-330c-5e20b679a2c5.png)
画像でまとめたけど言語の指定とかタイトルはこんな感じでもいける


```diff_ruby:diffサンプル
- puts "Diff -"
+ puts "Diff +"
```
`diff_*`と`-、+`をつければgitの変更差分みたいにDiff表示できるみたいだけど多分使わないからあるよぐらいに覚えておく

### 引用

> 文頭に>を置くことで引用になります。
> 複数行にまたがる場合、改行のたびにこの記号を置く必要があります。
> **引用の上下にはリストと同じく空行がないと正しく表示されません**
> 引用の中に別のMarkdownを使用することも可能です。
> 
> > これはネストされた引用です。

```
> 文頭に>を置くことで引用になります。
> 複数行にまたがる場合、改行のたびにこの記号を置く必要があります。
> **引用の上下にはリストと同じく空行がないと正しく表示されません**
> 引用の中に別のMarkdownを使用することも可能です。
> 
> > これはネストされた引用です。
```
これはよく使うので覚えておく

### インライン表示

`インライン表示`
↑これの表示をしたい場合は

```:書き方
`インライン表示`

` バッククオートで囲めばok
```

### 文字強調

**太字** と 普通文字
```
**太字** 
```

*斜め文字* と 普通文字
```
*斜め文字*
```
※斜め文字は見ずらいので使わなくて良い

~~打ち消し~~  と 普通文字
```
~~打ち消し~~
```

### Hタグ

# H1
## H2
### H3
#### H4
##### H5
###### H6

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


とりあえず基本的にはH2を使って
H2の見出し内ではH3使う感じで良さそう

### リンク

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

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

リンク使うよりも↓みたいにURL貼った方が見栄えはいいけど

http://qiita.com

文面の間にリンクおきたい場合があるので思うでそうゆう時はリンク使うといい
例:[Qiita](http://qiita.com)で記事を書いていますマークダウンで記事が書けます


### テーブル

| 1 | 2 | 3 |
|:-:|:-:|:-:|
| a | b | c |
| d | e | f |

```
| 1 | 2 | 3 |
|:-:|:-:|:-:|
| a | b | c |
| d | e | f |
```

`3x2`とか`行x列`を入力すると入力候補でテーブルのショートカットできる
![スクリーンショット 2024-02-05 5.59.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535004/67de5b94-a0b5-eaf8-a440-76a6f9d0a6d3.png)
詳しくは[ここ](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB:~:text=%E7%B5%90%E6%9E%9C-,%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB,-%E5%85%A5%E5%8A%9B%E8%A3%9C%E5%AE%8C%E3%82%92)確認

### PlantUML

```plantuml
Bob->Alice : Hello!
```

~~~
```plantuml
Bob->Alice : Hello!
```
~~~

フロー作る時に使うので覚えておく
PlantUMLの構文という

https://plantuml.com/ja/


### Mermaid

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

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

チャート作る時に使いそう
Mermaid構文


### リスト

- 1
    - 2
        - 3
        - 4
    - 5
- 6
- 7

```
- 1
    - 2
        - 3
        - 4
    - 5
- 6
- 7
```

1. 1
    1. 2
    1. 3
1. 4
1. 5

```
1. 1
    1. 2
    1. 3
1. 4
1. 5
```

これはあんま使わんかもだけど取りえずメモ


## 記事テンプレ

```
## 前提

## 実戦

## おわり
```