QiitaのMarkdownパーサー変更にともなう、脚注についての書き方と注意点


## 記事投稿シリーズについて

QiitaでGitHub Flavored Markdown (以下GFM) に準拠したMarkdownパーサーが[ベータ版として公開されました！](https://blog.qiita.com/replace-markdown-parser-beta/)

[Qiitaアカウントによる説明記事](https://qiita.com/Qiita/items/e87ebe3138f62b0e8b58)にも書いてあるのですが、今までと記法が変わっている箇所があるので注意が必要です。
せっかく書いた記事の表示が崩れてしまうのは困るので、可能な限り防ぎたいと考えています！

そこで、記事を書く時に注意すべき記法などについて、Qiita運営から5日間に分けて10記事のシリーズで投稿することになりました！
少しでも皆様が執筆する際の助けになればと思います。

詳しくはQiitaアカウントによる説明記事に、投稿シリーズの説明や、他の記事一覧が載っていますのでぜひ他の記事も読んでみてください！

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

## 脚注基本の書き方

脚注とは本文の下部にある、文章の特定の箇所についての注意書きです。
脚注を使えば、文章の流れを止めずに関連情報を参照できます。

### 書き方

1. 脚注を追加したい箇所に脚注の識別子[^identifier]を記述します。
    - 識別子は `[]` で囲った `^` からはじまる任意の文字列です。 ex. `[^1]`, `[^example]`
1. 1. と対になるように、`[^文字列]:` につづけて注釈文[^reference]を入力します。

[^identifier]:脚注挿入箇所をあらわす `[^___]` の文字列。本記事では便宜上このように表現します。
[^reference]:文章最下部に挿入される、関連情報、注意書き。

![Kapture 2022-02-14 at 10.46.15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32147/e026df52-592b-dd7d-520a-3da7692e184b.gif)


```markdown
GFM[^1]の脚注はこのよう書きます。 

[^1]: GFM とは https://github.com でサポートされている Markdown の方言です。
```

↓

GFM[^1]の脚注はこのよう書きます。
[^1]: GFM とは https://github.com でサポートされているMarkdownの方言です。

そして、注釈文[^reference]は下記のように本文最下部に表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32147/99d681a5-65c5-d113-dfa9-b095d77f0f12.png" width=500>



GFM につづく上付き文字のリンクの `1` の箇所が、注釈文へのアンカーリンクとなり、注釈文の `↩` から脚注対象の箇所へのアンカーリンクになっています。

文章中で複数の脚注が記述でき、追加するごとに脚注リンクの数字はインクリメントされます。


### 脚注の識別子[^identifier]で使える文字

`[]` で囲った `^` からはじまる任意の文字列には基本的にスペースやタブ文字を除いてあらゆる文字をつかえます。

`[^1]` がよく見掛けられますが、`[^example]` や `[^例]` のように、脚注を識別しやすいような記述もできます。(`[^🤔]`[^🤔]でもOKです。)

[^🤔]::thinking:

### 脚注はどこにでも入れられる
基本的にエスケープされなければどこでも使用できます。

#### 見出し[^heading]のなかでも
[^heading]:`#` から初める

**強調[^strong]** などの装飾の中でも
[^strong]:文字を太くて強調できます。

[^empty]
[^empty]:なにもない行でも

[リンクテキスト[^linktext]の中でも](https://qiita.com)
[^linktext]:リンク記法のテキスト部分

| | |
--|--
| | テーブル記法[^table]の中でも
[^table]:簡易的にテーブルを作成できます。

:::note warn
補足説明[^note]の中でも使用できます。
:::
[^note]:Qiita の独自記法

<details><summary>詳細の中にも</summary>

詳細[^in_details]
</details>

[^in_details]:開閉できます

### 注釈文はインラインの Markdown記法がつかえる
- イタリックなどの装飾[^decoration]はもちろん
- コードスパン[^codespan]も
- リンク[^link]も
- 画像[^image]も
- 絵文字[^emoji]も

ちゃんとパースされます。

[^codespan]:文中に`code`などを書く
[^image]:![qiitan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32147/930e49e2-7772-7275-8f1c-4628d84248b1.png)
[^link]:[Qiita](https://qiita.com)のようにリンクを記述
[^decoration]:**bold**, *italic*, ~~strike~~
[^emoji]::innocent: :sushi:

### 注釈文を複数行記述したい場合[^multipleline]

[^multipleline]: 注釈文を複数行にまたがって記述したい場合
  このように
  字下げをすると
  複数行記述できます。

```markdown:multiple_line.md
### 注釈文を複数行記述したい場合[^multipleline]

[^multipleline]:注釈文を複数行にまたがって記述したい場合
  このように
  字下げをすると
  複数行記述できます。
```




## 以前のQiitaのMarkdownパーサーとのちがい
下記のように使いやすさがアップデートされています!

### `:` の後のスペースが不要になった

```markdown:before.md
[^example]
[^example]: スペースが必要だったが...
```
↓
```markdown:after.md
[^example]
[^example]:スペースなくてもOKになった!
```


### 複数箇所に同じ脚注をつける場合、それぞれのアンカーリンクが生成されるようになった
以前は同じ脚注の識別子を付与しても注釈文からのアンカーリンク `↩` は1つだけでしたが、それぞれの脚注追加箇所へのアンカーリンクが生成されるようになっています。

例えば冒頭に脚注を書いた GFM[^1] を再度使用すると...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32147/90a55d37-ffd2-f0d2-dd55-3c85e5ad5799.png)

このように、2つ目のアンカーリンクができます。


### 数字でない文字列を脚注のタグとして使用した場合、アンカーの文字列が数字に変換されなくなった

`[^example]` とした場合でも `#fn-1`, `#fnref-1` といった、通し番号ですべて ID が付与されていましたが
`#fn-example`, `#fnref-example` のように、記述した識別子でIDが付与されるようになっています。


## 特殊な使いかたの例

あまり使わないであろう、特殊な使い方の例を最後に紹介します。


### 脚注に脚注をつけたい [^脚注]
[^脚注]: 脚注 [^脚注の脚注]
[^脚注の脚注]: 脚注の脚注

```markdown:footnotes_of_footnotes.md
### 脚注に脚注をつけたい[^脚注]
[^脚注]:脚注[^脚注の脚注]
[^脚注の脚注]:脚注の脚注
```

### 脚注をリストで書きたい[^list_in_footnotes]
[^list_in_footnotes]: <ul><li>リスト</li><ul><li>形式の</li><ul><li>脚注</li></ul></ul></ul>

```markdown:list_in_footnotes.md
### 脚注をリストで書きたい[^list_in_footnotes]
[^list_in_footnotes]: <ul><li>リスト</li><ul><li>形式の</li><ul><li>脚注</li></ul></ul></ul>
```


### (おまけ)絶対につかわないだろう例


[^twitter] [^details]

[^twitter]:コンテンツの埋め込みも...<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">📋リリースノート<br><br>・ベータ版として公開していたヘッダー、ユーザーページのUI更新を正式版としてリリースしました。<br>・記事ページ内のURLをカードスタイルで表示するようにしました。<a href="https://t.co/cVM59QMjiZ">https://t.co/cVM59QMjiZ</a></p>&mdash; Qiita (キータ) 公式 (@Qiita) <a href="https://twitter.com/Qiita/status/1365218441011990531?ref_src=twsrc%5Etfw">February 26, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[^details]:注釈文の詳細をみたい場合は<details><summary>こちら</summary>なんて使いかたしないよね</details>



## 最後に
書籍や論文などで参考文献や難しい用語等で脚注が入っているのをよく見掛けると思います。
脚注を使いこなして、より、読み手やさしい記事を書いてみましょう！

他の記法についてもまた別の記事でまとめていますので、合わせて読んでみてください！
詳しくは[Qiitaアカウントによる説明記事](https://qiita.com/Qiita/items/e87ebe3138f62b0e8b58)をご覧ください！

↓記事投稿シリーズまとめ

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

↓前の記事

https://qiita.com/fussy113/items/b40f60f6803aa2d5cfbc

↓次の記事

https://qiita.com/mziyut/items/bc00ed7396bd60a717b8

## Refs

- [Footnotes now supported in Markdown fields | GitHub Changelog](https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/)
- [Basic writing and formatting syntax - GitHub Docs](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#footnotes)