QiitaのMarkdownパーサー変更にともなう、引用とHTMLブロックについての注意点

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

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

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

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

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

この記事ではGFMの記法のうち、「引用」と「HTMLブロック」について説明します。

1. 引用

引用は

このように、引用している内容が分かるように示すことができます。

基本的には

> このように、引用している内容が分かるように示すことができます。

のように行頭に> をつけるとblockquote要素にパースされるのですが、いくつか注意点があります。

引用ブロックの分割

空行が入ると引用ブロックは分かれます

引用ブロックが分かれる

> 1つ目の引用

> 2つ目の別の引用

のように空行が入ると、

1つ目の引用

2つ目の別の引用

のように別のblockquoteにパースされます。

これは、

Most current Markdown implementations, including John Gruber’s original Markdown.pl, will parse this example as a single block quote with two paragraphs. But it seems better to allow the author to decide whether two block quotes or one are wanted.

(DeepL訳) John GruberのオリジナルのMarkdown.plを含む、現在のほとんどのMarkdown実装は、この例を2つのパラグラフを持つ単一のブロック引用としてパースします。しかし、2つのブロック引用か1つのブロック引用かを著者が決定することを許可する方が良いように思われます。

とあるように、他のパーサーでは1つのブロックにパースされることが多いようなので、この書き方に慣れている方は注意が必要です。

引用の途中に空行を入れたい場合は、>のみの行を入れましょう

空行を入れたい時

> 1つ目の引用
>
> 空行をはさんで同じ引用

Laziness について

Lazinessタイプの書き方をするときは、引用ブロックの外に出てしまう可能性があります

複数行の引用をする際に、段落が続く場合は先頭に>がなくても一つの引用ブロックとすることができます。このタイプをLazinessと呼んでいるようです。

> 1つ目の引用部分
> 先頭に`>`がついている

> 2つ目の引用部分
先頭に`>`がついていなくても同じブロック

Lazinessタイプが使えるのは1つの段落と判定されるもののみなっています(paragraph continuation text)。具体的には以下のExample-213のような例では

Example-213

> - foo
- bar

このように bar は引用の外に出てしまいます。

• foo

• bar

うまく同じブロックに入らないなと思ったら、以下のように>をつけてみてください

> - foo
> - bar

個人的には、どうパースされるかを考えて省略するよりは、とにかく先頭に> をつけています。

2. HTMLブロック

実はMarkdown内にHTMLを書くことができ、Qiitaでも一部のHTMLを許容しています。
あまりHTMLを書きたい場面は多くはないと思いますが、Markdown記法 チートシートでも取り上げている、折りたたみ(details)と、 説明リスト(dl, dt, dd)をピックアップして説明します。

折りたたみ (details)

ここに折りたたまれている

折りたたまれた部分

これはこのように書かれています。

<details><summary>ここに折りたたまれている</summary>
折りたたまれた部分
</details>

本筋よりも重要ではないけれど補足として書きたいときや、長いコードを貼りたいけど記事が読みづらくなるなというときに使ったりします。

この折りたたまれた部分にもMarkdown記法を使うことができるのですが、一部注意が必要です。

HTMLの記述の下に空行を挟まないと、Markdownとしてパースされません

どういうことかというと、

<!-- 適切にパースされない -->
<details><summary>適切にパースされない</summary>
**強調したいけど強調されない**
</details>
- リストにしたいけどリストにならない


<!-- Markdown記法が使える -->
<details><summary>Markdown記法が使える</summary>

**上に空行を入れると、強調が使える**
</details>

- 上に空行を入れるとリストが使える

のように空行を入れる必要があります。 上記の内容を実際に見てみると分かりやすいと思います。

適切にパースされない

**強調したいけど強調されない**

- リストにしたいけどリストにならない

Markdown記法が使える

上に空行を入れると、強調が使える

• 上に空行を入れるとリストが使える

HTMLのタグを使う場合は下に空行を入れましょう

説明リスト (dl, dt, dd)

次は説明リストについてです。Markdown記法 チートシートにある例を使いますが、

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

のように書くと、

リンゴ

赤いフルーツ

オレンジ

橙色のフルーツ

というような表示になります。また、チートシートには以下のようにも書かれています。

注意するべきは、Definition型のリスト内ではMarkdown記法が使えないということです

しかし、

今回のパーサーの変更により、Definition型のリスト内でもMarkdown記法が使えるようになります！

具体的には、先程の空行を挟むとMarkdownとしてパースできるというルールを使います。

<dl>
  <dt>リンゴ</dt>
  <dd>

とても **赤い** フルーツ</dd>
</dl>

と、もしもコードレビューに出したら指摘を受けてしまうような書き方となってしまっていますが、<dd>タグの下に空行を入れることで

リンゴ

とても 赤い フルーツ

のように強調されています！

おまけ: コメントアウトも使える

QiitaだとMarkdownの本文を見ることができちゃうのであまり意味ないですが、コメントアウトも使えます！

ここにコメントアウトがあります →

<!-- コメントアウトされている -->

と書かれています。

もしかしたら使いたいタイミングもあるかもしれないです。

まとめ

引用

• 引用の途中に空行を入れたい場合は>のみの行を入れましょう！
• 確実に引用にしたいときは、先頭に>をつけましょう！

HTMLブロック

• HTMLのタグを使うときは下に空行をいれましょう！
• Definition型のリスト内でもMarkdown記法が使えるようになります！

最後に

今回はQiitaのMarkdownパーサー変更にともなう、引用とHTMLブロックについての注意点でした。

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

---

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

↓前の記事

↓次の記事