Closed7

Jekyll で Markdown の要素(特にパラグラフ)にクラスを設定することはできるのか?

ピン留めされたアイテム
aikigeaikige

モチベーション

Jekyll でサイトを構築していて、記事を Markdown で記述している場合に、スタイル設定やリンクのために、段落、見出し、リンクなどに class="xxxx"id="yyyy" を追加したい。

HTMLをベタ書きすれば、所望のことはできるが、それだとあまりスマートじゃないので、Markdown の範囲でできる方法があれば知りたい。

aikigeaikige

段落に適用

段落 (<p>要素) に適用する場合は、改行の後に {: } で囲われた設定を記載する。

クラスを設定

markdown
Some Paragraph
{:.classA}

はだいたい以下に:

html
<p class="classA">Some Paragraph</p>

IDを設定

markdown
Other Paragraph
{:#idA}

html
<p id="idA">Other Paragraph</p>

のように解釈される。

aikigeaikige

Jekyll は、Markdown のパーサに(デフォルトだと)Kramdown を利用していて、どうもこの書式は Kramdown のものらしい。

aikigeaikige

リンクにクラスを適用する場合

[ほげ](hoge.html){:.classA}

はおおむね以下のように解釈される:

<a href="hoge.html" class="classA">ほげ</a>
aikigeaikige

見出しにIDを付与する場合にも使える。この場合も改行のあとにIALを挿入。

markdown
## 見出し
{:#some_id}
このスクラップは2024/02/06にクローズされました