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

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

QiitaでGitHub Flavored Markdown (以下GFM) に準拠したMarkdownパーサーがベータ版として公開されました！

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

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

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

脚注基本の書き方

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

書き方

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

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

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

↓

GFM³の脚注はこのよう書きます。

そして、注釈文²は下記のように本文最下部に表示されます。

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

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

脚注の識別子¹で使える文字

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

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

脚注はどこにでも入れられる

基本的にエスケープされなければどこでも使用できます。

見出し⁵のなかでも

強調⁶ などの装飾の中でも

⁷

リンクテキスト8の中でも

	テーブル記法9の中でも

補足説明¹⁰の中でも使用できます。

詳細の中にも

詳細¹¹

注釈文はインラインの Markdown記法がつかえる

• イタリックなどの装飾¹²はもちろん
• コードスパン¹³も
• リンク¹⁴も
• 画像¹⁵も
• 絵文字¹⁶も

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

注釈文を複数行記述したい場合¹⁷

multiple_line.md

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

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

以前のQiitaのMarkdownパーサーとのちがい

下記のように使いやすさがアップデートされています!

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

before.md

[^example]
[^example]: スペースが必要だったが...

↓

after.md

[^example]
[^example]:スペースなくてもOKになった!

複数箇所に同じ脚注をつける場合、それぞれのアンカーリンクが生成されるようになった

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

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

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

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

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

特殊な使いかたの例

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

脚注に脚注をつけたい ¹⁸

footnotes_of_footnotes.md

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

脚注をリストで書きたい²⁰

list_in_footnotes.md

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

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

^{21 22}

最後に

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

他の記法についてもまた別の記事でまとめていますので、合わせて読んでみてください！
詳しくはQiitaアカウントによる説明記事をご覧ください！

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

↓前の記事

↓次の記事

Refs

• Footnotes now supported in Markdown fields | GitHub Changelog
• Basic writing and formatting syntax - GitHub Docs

1. 脚注挿入箇所をあらわす [^___] の文字列。本記事では便宜上このように表現します。 ↩ ↩²

2. 文章最下部に挿入される、関連情報、注意書き。 ↩ ↩²

3. GFM とは https://github.com でサポートされているMarkdownの方言です。 ↩ ↩²

4. ↩

5. # から初める ↩

6. 文字を太くて強調できます。 ↩

7. なにもない行でも ↩

8. リンク記法のテキスト部分 ↩

9. 簡易的にテーブルを作成できます。 ↩

10. Qiita の独自記法 ↩

11. 開閉できます ↩

12. bold, italic, strike ↩

13. 文中にcodeなどを書く ↩

14. Qiitaのようにリンクを記述 ↩

15. ↩

16. ↩

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

18. 脚注 ¹⁹ ↩

19. 脚注の脚注 ↩

20. • リスト
    • 形式の
    • 脚注
    ↩

21. コンテンツの埋め込みも...

    📋リリースノート
    
    ・ベータ版として公開していたヘッダー、ユーザーページのUI更新を正式版としてリリースしました。
    ・記事ページ内のURLをカードスタイルで表示するようにしました。https://t.co/cVM59QMjiZ

    — Qiita (キータ) 公式 (@Qiita) February 26, 2021

    ↩

22. 注釈文の詳細をみたい場合は

    こちら

    なんて使いかたしないよね
    ↩