Qiita の Note 内で Markdown を試してみた

markdown-it-container に似た記法が Qiita にも加わった。

https://github.com/markdown-it/markdown-it-container

背景に色を付けて警告などを示すことが出来るアレだ。Zenn でも利用できるらしい。

いつの間にか加わったこの機能を Qiita ではこれを Note と呼ぶようだ。
以下の Qiita 公式記事では 2021 年 7 月 12 日時点で Note について更新されているので、少なくともこれ以降で利用できるようになっているようだ。

本記事では Note 内でさまざまな Markdown を試してみたい。

Note とは

↓ のようにすると

:::note warn
NOTE WARNING!!!
:::

↓ のようになるやつ

NOTE WARNING!!!

他にも、note info（note と同じ）や note alert もある。

NOTE INFO

NOTE ALERT!!!

いろんなパターンで試してみる

もちろん、Note 内でも Markdown 記法を利用したいので note でテストしてみよう。

2022/02/16 現在。β 版に移行しました。
以下の記事によれば、

• リンク
• 箇条書き
• コード
• 太字
• 斜体
• 打ち消し線
• 画像

について Markdown がきちんと使えるようになっている。一方で、これ以外の記法については、表示が上手くいっていないようだ。
本記事の β 版以前の表示に関する記述はコメントアウトしておく。

2022/02/09 現在、公開されている β 版で Note 記法内の Markdown が利用できるようになっています
※この記事は旧パーサのまま（β 版を利用していない）なので Note 内の Markdown はうまく処理されていません

Markdown で記載された場合の通常の出力については冗長的になってしまうため示していません。もし分からない場合は Qiita の以下の記事を参照してください。

テキストの装飾

:::note
#### Markdown style

*Italic* **Bold**
~~strikethrough~~ :kissing_closed_eyes:

#### HTML style

<em>Italic</em> <strong>Bold</strong>
:::

Markdown style

Italic Bold
strikethrough

HTML style

Italic Bold

Markdown も上手く表示されている！
しかし、Note 内の見出しが目次に表示されてしまう。

リスト

:::note
- contents1
- contents2
- contents3

1. first
1. second
1. third

- [ ] task1
- [x] task2
:::

• contents1
• contents2
• contents3

1. first
2. second
3. third

• task1
• task2

リストもすべてきれいに表示されている！

引用

:::note
> Blockquote
> > Nested blockquote
:::

Blockquote

Nested blockquote

あまり Note 内で引用することはないかもしれないが、それなりに綺麗に表示されているのではないだろうか。

Note を引用

> :::note
> NOTE
> :::

NOTE

Note 記法が……消えた……？！

Note 記法が消えずにちゃんと表示されている！！

コード

:::note

```
Fenced Codeblock
```

`code`
:::

Fenced Codeblock

code

上手く表示されている！
もうブロックコードが右にはみ出すことがなくなった！

長くても問題ない！

Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock 

HTML タグをコードにしても問題ない。

:::note
`<strong>`Bold`</strong>` `<em>Italic</em>`
:::

<strong>Bold</strong> <em>Italic</em>

これはヤバい もうヤバくない！

表

:::note
| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |
:::

Syntax	Description
Header	Title
Paragraph	Text

一部、透明になってしまっているところがあるが、表自体はきれいに表示されている！

脚注

:::note
Note 内の脚注は見れなくなってしまいます。[^footnote]
:::

[^footnote]: ~~これは脚注ですが表示されていません~~ 表示されるようになりました！

Note 内の脚注は見れなくなってしまいます。¹

表示されていないことはありません！

リンク

リンクの方法は 4 つある。

• 通常のリンク
• 参照スタイルのリンク
• リンクカード
• ページ内リンク

:::note
[Qiita](https://qiita.com/)

[Qiita][link]

https://qiita.com/

[ページ内リンク](#リンク)
:::

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

Qiita

Qiita

https://qiita.com/

ページ内リンク

リンク全部 OK！

ただし、リンクカードは上手くいかないようだ。

https://qiita.com/

リンクカードは引用内でも利用できないため、それほど問題視する必要はないかもしれない。

画像

画像の方法は 3 つの方法がある。

• 普通の Markdown 画像リンク
• 参照スタイルの画像リンク
• HTML の画像リンク

:::note
![Qiita](https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png "Qiita")

![Qiita][image link]

<img src = "https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png" width = "50%" alt = "Qiita">
:::

[image link]: https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png

どの形式でも画像を表示できる！

定義リスト

::::note
<dl>
  <dt> リンゴ </dt>
  <dd> 赤いフルーツ </dd>
  <dt> オレンジ </dt>
  <dd> 橙色のフルーツ </dd>
</dl>
:::

リンゴ

赤いフルーツ

オレンジ

橙色のフルーツ

折りたたみ

:::note
追加情報としたい内容を、details タグで囲みます。そして、要約として表示したい文章を summary タグで記載します。

Qiita とは

<details>
<summary>Qiita(キータ) は、プログラマのための技術情報共有サービスです。</summary>
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
Qiita に投稿すると、自分のコードやノウハウを見やすい形で残すことができます。
技術情報はテキストファイルへのメモではなく、タグを付けた文章、シンタックスハイライトされたコードで保存することで初めて再利用可能な知識になる、そう Qiita では考えています。
</details>
:::

追加情報としたい内容を、details タグで囲みます。そして、要約として表示したい文章を summary タグで記載します。

Qiita とは

Qiita(キータ) は、プログラマのための技術情報共有サービスです。

プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。 Qiita に投稿すると、自分のコードやノウハウを見やすい形で残すことができます。 技術情報はテキストファイルへのメモではなく、タグを付けた文章、シンタックスハイライトされたコードで保存することで初めて再利用可能な知識になる、そう Qiita では考えています。

まともな位置に表示されるようになった！

数式

• ```math
• $$
• $

:::note
$$
f(x)
  = ax^2+bx+c
$$
:::

$$
f(x)
= ax^2+bx+c
$$

数式も問題なく表示できるみたい！

まとめ

2022/02/16 現在
ほとんどの Markdown 記法に対応できるようになった！！

表示が上手くいっていない記法もまだあるものの、十分に活用できるものになったようだ。ありがたい！！
Qiita 開発の皆様には感謝です。

まだ不十分そうなところ

Note 内で Markdown がまだ不十分そうなところを列挙しておきたい。

• 見出しが目次に表示される
• 表背景の一部が透明
• リンクカード

追記

• 2021/08/24: タイトルを変更しました。また、複数追記しました。
• 2022/02/16: β 版に移行して記事を更新しました。
• 2022/09/04: Note 記法内のブロックコードが右端ではみ出さなくなりました。
• 2022/09/25: いつの間にか Note 記法を引用しても Note がきちんと表示されるようになりました。

1. これは脚注ですが表示されていません 表示されるようになりました！ ↩