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

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

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

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

背景に色を付けて警告などを示すことが出来るアレだ。[Zenn](https://zenn.dev/zenn/articles/markdown-guide#%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8) でも利用できるらしい。

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

https://qiita.com/Qiita/items/c686397e4a0f4f11683d#note---補足説明

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

## Note とは

↓ のようにすると

```markdown
:::note warn
NOTE WARNING!!!
:::
```

↓ のようになるやつ

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

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

:::note info
NOTE INFO
:::

:::note alert
NOTE ALERT!!!
:::

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

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

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

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

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

https://qiita.com/xrxoxcxox/items/0c91e5319c32434f2c6a

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

https://blog.qiita.com/replace-markdown-parser-beta/

<!--
:::note
先に結果を示しておくと、2021/08/15 現在で利用可能なのは HTML と絵文字のみでした。
また、div タグで囲っても同様の結果を得ました。
:::
-->

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

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

### テキストの装飾

```markdown
:::note
#### Markdown style

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

#### HTML style

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

:::note
#### Markdown style

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

#### HTML style

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

<!--
見出し以外は使いたいところ。
Note 内で利用した見出しは右に表示される目次にも影響している。ちょっと良くなさそう。
-->

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

### リスト

```markdown
:::note
- contents1
- contents2
- contents3

1. first
1. second
1. third

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

:::note
- contents1
- contents2
- contents3

1. first
1. second
1. third

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

<!--
markdown として変換されていなくてもリストくらいであれば我慢できそう。
-->

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

### 引用

```markdown
:::note
> Blockquote
> > Nested blockquote
:::
```

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

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

### Note を引用

```markdown
> :::note
> NOTE
> :::
```

> :::note
> NOTE
> :::

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

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

### コード

````
:::note

```
Fenced Codeblock
```

`code`
:::
````

:::note

```
Fenced Codeblock
```

`code`
:::

<!--
``` `code` ``` を Note 内で利用したい人は多いのではないだろうか。
-->

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

<!-- ブロックコードは右側が少しはみ出ているナ…… -->
<!--
HTML ならどうなるだろうか。

```markdown
:::note
<pre><code>Fenced Codeblock</code></pre>
:::
```

:::note
<pre><code>Fenced Codeblock</code></pre>
:::
-->

<!--
Fenced Codeblock では丸レ点 :white_check_mark: が無くなってしまった。ドウシテ?
また、これに続けて文字を打つと Fenced Codeblock の右側に表示される。
-->
<!--
HTML も Markdown とそれほどかわらない結果を得るようだ。
また、ブロックコードに続けた文章は改行されるようだ。

:::note
<pre><code>Fenced Codeblock</code></pre> このコードは〜
:::
-->

<!--
Fenced Codeblock 内は長すぎても良くない。記事内全体がバグる。
-->

長くても問題ない！
<!-- 長いとやはりバグるようだ。 -->

:::note
<pre><code>Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock Fenced Codeblock </code></pre>
:::

<!-- インラインコードでも HTML タグを試してみる。 -->

<!--
```markdown
:::note
<code>code</code>
:::
```

:::note
<code>code</code>
:::
-->

<!-- インラインコードは色が識別しづらいかもしれない。 -->

<!-- また、HTML タグを ``` `code` ``` で囲って Note 内で利用してみると面白い結果を得た。のは過去の話。 -->

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

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

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

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

### 表

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

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

<!--
`|` が揃っているはずなのだけどガタガタしている。フシギ。
-->

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

### 脚注

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

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

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

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

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

### リンク

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

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

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

[Qiita][link]

https://qiita.com/

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

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

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

[Qiita][link]

https://qiita.com/

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

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

<!--
リンク全部だめ。
-->

リンク全部 OK！

<!--
これもやはり見れません。
-->

<!-- これも OK！ -->

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

:::note
https://qiita.com/
:::

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

### 画像

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

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

```markdown
:::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
![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

<!--
画像はたまに HTML で挿入することがあるので、まだ使うに耐えそう。
-->

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

### 定義リスト

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

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

### 折りたたみ

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

Qiita とは

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

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

Qiita とは

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

<!--
すごい位置に折りたたみが表示されるね。
-->

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

### 数式

<!--
数式を以下の 3 つのパターンで試してみましたが、実際に試してみるとなぜかすべての Note が表示されなくなるようになりました。ナンデ?
この記事の意味がなくなってしまいかねないので数式については割愛。
-->

- ```` ```math ````
- `$$`
- `$`

<!--
どれが悪さをしているのかは分からない。あまり Note 内で数式を使わない方が良さそう。
-->

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

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

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

# まとめ

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

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

<!--
:::note
2021/08/15 現在
どうやら Qiita の Note 内では markdown を理解しないらしい。HTML と絵文字なら理解してくれる。
:::
-->

<!--
Zenn など他の似た機能に対する markdown の対応は分からないが、Note 内でも markdown を利用したいよね、もちろん。

ともかく、背景を変えて表示できるのは嬉しい :smile:
-->

<!-- https://www.webfx.com/tools/emoji-cheat-sheet/ -->

## まだ不十分そうなところ

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

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

<!-- また、引用内での Note は消える。 -->

# 追記

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

<!--

[Note](#note---補足説明) の機能追加ありがとうございます！:smile:

この機能を利用して記事を書こうとしたところ、Note 内で markdown が利用できないようでした。
以下の記事にまとめてみました :memo:

https://qiita.com/Yarakashi_Kikohshi/items/a52df374e371bacb2ded

これらは Note の意図した利用方法ではないのかもしれませんが、以下のような記法については Note 内で利用できた方が有用性が高いように思います。

- *Italic*
- **Bold**
- ~~Strikethrough~~
- `Code`
- リンク
- 画像

可能であれば対応よろしくお願いします :wink:
-->

<!--
for Issue

Does not work markdown in Note notation

I want to use markdown in `Note`, but markdown in `Note` does not work.

I actually showed it in the article in Japanese below.

> https://qiita.com/Yarakashi_Kikohshi/items/a52df374e371bacb2ded

I would like to use at least the following markdown in `Note`.
I think it will be more useful.

- *Italic*
- **Bold**
- ~~Strikethrough~~
- `Code`
- link: e.g. `[Qiita Home](http://qiita.com)`
- image: e.g. `![Alt](Image link)`

Also, as shown in this article, there seems to be a problem with certain markdown and the use of HTML tags.
Please refer to the following article for details.

In some example, Heading, Fenced Codeblock, details (HTML) and more.
In particular, using formulas (```` ```math ````) in `Note` seemed to destroy other `Note` as well.

If there is a notation that should not be used in `Note`, please show it.

----------

I have already commented in the following article, but I sent it because I was asked to mention the request in the Issue.

> https://qiita.com/Qiita/items/c686397e4a0f4f11683d#comment-3d054fb8c6ee27ca06ef
-->