Work Life Fun

仕事も人生も楽しむ社労士

[Hugo]MarkdownでID、クラス属性の付与が可能

Hugo 0.81.0から、MarkdownでID、クラス属性の付与が可能になっています。

MarkdownでID、クラス属性を付与するための設定

必要な設定は「config.toml」で以下を記入するのみです。たったこれだけです。

[markup]
  [markup.goldmark]
    [markup.goldmark.parser]
      [markup.goldmark.parser.attribute]
        block = true    #<== ここをtrueにする

Hugoの公式サイトでは以下のように解説されています。

attribute

Enable custom attribute support for titles and blocks by adding attribute lists inside single curly brackets ({.myclass class=“class1 class2” }) and placing it after the Markdown element it decorates, on the same line for titles and on a new line directly below for blocks.

タイトルやブロック要素の後に、{}でクラス名を書きなさい、ということです。

といっても、例を見ていただいた方が早いでしょう。

利用例:段落の場合

まずは、段落要素を例にします。

Markdownで文章を書き、改行すると自動的に段落要素(pタグ)として認識されます。

段落に、ID、クラス属性を付与する場合は、文章を書き改行したところで、{}の中にクラス名、ID名を入れます。

以下がその例です。ちなみに、サンプル文章は、夏目漱石「私の個人主義」からの引用です。

私は毎日近頃この力説ごととして事の一方へ着けらしくた。単に十一月に活動顔もきっとそうした影響んですまでへさといただきですがは講演するないたと、実際にも云うないたませう。権利に云いでのは何でもかでも時分にけっしてませませた。
{.para #memo}

ポイントは、文章の後の「.para」と「#memo」の部分であり、「.」はクラス、「#」はIDを表しています

レンダリング結果は以下のようになります。

<p class="para" id="memo">
私は毎日近頃この力説ごととして事の一方へ着けらしくた。単に十一月に活動顔もきっとそうした影響んですまでへさといただきですがは講演するないたと、実際にも云うないたませう。権利に云いでのは何でもかでも時分にけっしてませませた。
</p>

利用例:リストの場合

次に、リスト要素の場合です。

段落の場合と同様に、要素の後で、{}の中にクラス名、ID名を入れます。

以下のように各要素にそれぞれクラス名を付与できます。

* Fruit
  * Apple
  * Orange
  * Banana
  {.fruits}
* Dairy
  * Milk
  * Cheese
  {.dairies}
{.list}

レンダリング結果は以下のようになります。

<ul class="list">
    <li>Fruit
        <ul class="fruits">
            <li>Apple</li>
            <li>Orange</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Dairy
        <ul class="dairies">
            <li>Milk</li>
            <li>Cheese</li>
        </ul>
    </li>
</ul>

正直、この機能は、かなりありがたいです。

せっかくMarkdownで記事を書けるのに、IDやclassを付与する場合はHTMLのタグで書く必要があるのはかなり面倒ですから。

Hugoはどんどん進化し便利になっています! ほんと、WordPressからHugoに乗り換えていて良かったです👍

関連:ブログ・サイトの管理をWordPressからHugoに移行したら爆速で快適

参考:Hugo のバージョンをアップデート

【無料】効率的に人事労務の情報を入手しませんか?
  • 毎年のように改正される労働法令への対応に頭を悩ませている
  • 総務や経理などの他の業務を兼務しているので、人事労務業務だけに時間を割けない

といった悩みを抱える企業の経営者・人事労務担当者向けに、公開型のブログでは書けない、本音を交えた人事労務に関する情報・ノウハウ、時期的なトピックをメールマガジンを配信しています。

過去の配信分は公開しないため、情報が必要な方は、いますぐ以下のフォームから購読の登録をしてください。購読して不要と思ったら簡単に解除できますのでご安心ください。