Qiitaで使うMarkdown記法 myまとめ (備忘録)

Qiita 事始め。アカウント登録を済ませ、試しに投稿してみようと編集画面を開いたら、`Markdown`ってなんぞや？となった初心者です。
n番煎じだけど、記事を書くに際して必要となった記法をまとめる。随時追加していく予定。
※参考にさせていただいた記事には、適宜文中または[<ins>文末</ins>](#参考文献)にリンクを張っております。

<!-- =========================================================== -->
# 目次
<!--[目次へ](#目次)-->
[1. テキストの修飾](#1-テキストの修飾)
[2. テキストの構造化](#2-テキストの構造化)
[3. コンテンツの埋め込み](#3-コンテンツの埋め込み)
[参考文献](#参考文献)


<!-- =========================================================== -->
# 1. テキストの修飾
<!-- ----------------------------------------------------------- -->
## 文字スタイル
`**style**`と記述すると、**style**と太字になる。
このように、特別な記号で文字列を挟むことで、文字スタイルを変更できる。

|記号|効果|結果|
|---|---|---|
|`|ハイライト |`style`|
|```<br> or <br>~~~|複数行をハイライト <br> (シンタックスハイライト) |(下記参照)|
|*|斜体|*style*|
|**|太字|**style**|
|***|斜体かつ太字|***style***|
|~~|打ち消し線|~~style~~|

:::note warn
ハイライト記号は、クォーテーション``` ' ```ではなく、バッククォート``` ` ``` なので注意。
:::

## シンタックスハイライト
- 複数行をハイライトしたい場合は、以下のようにバッククォートで囲めば良い。

:::note
**記述:**
~~~markdown
```
hoge
fuga
```
~~~
:::

>**結果:**
>```
>hoge
>fuga
>```

- また、次のように、記述言語名を指定して書くと
~~~:C言語を指定したシンタックスハイライト
```c:(内容説明)
int main(void){
  return 0;
}
```
~~~
次のようにハイライトがつけられる。`(内容説明)`の部分に自由な文字列を入れられる。
```c:(内容説明)
int main(void){
  return 0;
}
```
シンタックスハイライト可能な言語については、下記参照。


http://qiita.com/Qiita/items/e84f5aad7757afce82ba

<!-- ----------------------------------------------------------- -->
## ノート記法
補足(note)を記述する環境。[ノート記法](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#note---%E8%A3%9C%E8%B6%B3%E8%AA%AC%E6%98%8E)と言うらしい。

~~~markdown:ノート記法
:::note
これは情報です
:::

:::note warn
これは注意です
:::

:::note alert
これは警告です
:::
~~~

**結果:**

:::note
これは情報です
:::

:::note warn
これは注意です
:::

:::note alert
これは警告です
:::

<!-- ----------------------------------------------------------- -->
## 文字に色をつける
Markdownの仕様として、HTMLタグにも対応している[^1]らしく、
~~~html: HTMLタグで色を指定
<font color="blue">text</font>
~~~
などと記述することで、「 <font color="blue">text</font> 」のように色をつけることが可能。
[^1]:[INLINE HTML; Markdown Syntax Documentation](https://daringfireball.net/projects/markdown/syntax#html)

<!-- ----------------------------------------------------------- -->
## その他HTMLタグの利用
- HTMLタグを使えば、文字に<ins>アンダーライン</ins>(<u>下線</u>)を引くこともできる。
~~~html: HTMLタグによる下線
<ins>アンダーライン</ins>
<u>下線</u> ←こっちはダメっぽい
~~~

- 改行タグ`<br>`を使用することで、テーブルのセル内やリストの途中で改行が可能になる。

- コメントアウトのタグ:
~~~html: HTMLコメント
<!-- this is a comment -->
~~~
を使用することで、記事に表示されないコメント文を書ける。
<!-- \( ´ω` )/ -->

<!-- ----------------------------------------------------------- -->
## ページ折りたたみ

[(目次へ戻る)](#目次)

<!-- =========================================================== -->
# 2. テキストの構造化
<!-- ----------------------------------------------------------- -->
## 目次生成

<!-- ----------------------------------------------------------- -->
## 見出し
`#`を文頭に付けると見出しとなる。複数個使うと数に応じて小さな見出しになる。
> # headline1
> ↑ `# headline1`と記述
> ## headline2
> ↑ `## headline2`と記述
> ### headline3
> ↑ `### headline3`と記述
> #### headline4
> ↑ `#### headline4`と記述
>
> #headline
> ↑ `#headline`と記述 (スペースなし)

ただし、`#`の末尾にはスペースを入れる必要があるみたい。古い記事の情報と食い違うので調べたところ、2022年から記法の仕様が変更がされているようだ。見出しの仕様変更については[公式ヘルプ](https://help.qiita.com/ja/articles/qiita-markdown)で言及されていた。仕様変更の全般については下記。

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

<!-- ----------------------------------------------------------- -->
## リスト (箇条書き)
文頭に`- `, `+ `, `* `のいずれかをつけると、番号が付かないリストになる。
- スペースかタブでインデント(字下げ)すると、ネスト(入れ子)になる。半角スペースなら2つ以上必要。
~~~markdown
- List1
  - list1-1
  * list1-2
+ List2
  - list2-1
  + list2-2
    * list2-2.1
~~~
> 結果:
> - List1
>   - list1-1
>   * list1-2
> + List2
>   - list2-1
>   + list2-2
>     * list2-2.1

### 番号付きリスト
文頭に「数字+ドット記号+スペース」で番号付きリストになる。
- ネストのためには半角スペース3つ以上。
- 番号は自動的に割り振られるため、数字部分はすべて1などとしておくとリスト項目の追加削除に便利。
~~~markdown:番号付きリスト
1. List1
1. List2
   1. list2-1
   1. list2-2
1. List3
   1. list3-1
      1. list3-1.1
~~~
> 結果:
> 1. List1
> 1. List2
>    1. list2-1
>    1. list2-2
> 1. List3
>    1. list3-1
>       1. list3-1.1

<!-- ----------------------------------------------------------- -->
## テーブル

<!-- ----------------------------------------------------------- -->
## 引用の設定

[(目次へ戻る)](#目次)

<!-- =========================================================== -->
# 3. コンテンツの埋め込み
<!-- ----------------------------------------------------------- -->
## URLリンクの挿入
記事内に、指定したURL(webアドレス)へのリンクを設定する。
### urlのみ貼り付け
- urlの前後に空行を入れて貼り付けると、リンク先のページがリンクカードとしてサムネイル付きで追加される。
~~~markdown:url貼り付け (前後に空行あり)

https://qiita.com/

~~~
結果:

https://qiita.com/

- 改行をしないと、サムネイルなしのurl文字列のみの表示となる。
~~~markdown:url貼り付け (空行なし)
https://qiita.com/
~~~
結果:
> https://qiita.com/

### リンク文字列を指定
`[表示文字列](url)`で、リンクを設定する文字列を指定できる。
```markdown
[Qiitaのトップページ](https://qiita.com/)
```
結果:
> [Qiitaのトップページ](https://qiita.com/)

### リンクを定義し、別途参照
リンクしたいurlを名前付け(ラベリング)することにより、ラベル名を指定することでリンクを記述できる。ラベルの定義は文頭でも文末でも問題ないっぽい。
```markdown:urlラベル'qiita'を定義

[qiita]: https://qiita.com/

[Qiita][qiita]への[リンク][qiita2]は[こちら][qiita]です。

[qiita2]: https://qiita.com/
```
結果:

[qiita]: https://qiita.com/
> [Qiita][qiita]への[リンク][qiita2]は[こちら][qiita]です。

[qiita2]: https://qiita.com/

<!-- ----------------------------------------------------------- -->
## 画像の埋め込み

[(目次へ戻る)](#目次)

<!-- =========================================================== -->
# 参考文献
### 公式ドキュメント
https://qiita.com/Qiita/items/c686397e4a0f4f11683d

https://help.qiita.com/ja/articles/qiita-markdown

### 全体的に参考にさせていただいた記事：
- [Markdown記法 サンプル集 - Qiita](https://qiita.com/tbpgr/items/989c6badefff69377da7)
- [MarkDown記法 - Qiita](https://qiita.com/Blueman81/items/72ca43681d16d44e21ad)
- [Markdown 記法 サンプル 一覧 - Qiita](https://qiita.com/jkjoluvjlajelljicvjzojieoaid/items/01cd7ff819bc2e69b652)