Hugoのマークダウン記法

基本のマークダウン

マークダウンの書き方については、Hugo - Markdown Guideを参照してください。

マークダウンで書いた要素にCSSクラスを付与

詳細は、Goldmark - Hugoのattributeを参照してください。 概要は下記のとおりです。

1. /config.tomlに下記を記述。

   [markup.goldmark.parser.attribute]
   block = true
   

2. 原稿のマークダウンで書いたブロック要素の次行に{.classA .classB}等のクラス名を記述。

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

マークダウンでなくHTMLを直接書く

詳細は、Goldmark - Hugoのunsafeを参照してください。 概要は下記のとおりです。

1. /config.tomlに下記を記述。

   [markup.goldmark.renderer]
   unsafe = true
   

2. 原稿にHTMLを書く。

   * Fruit            ← マークダウンも書けるし…
   * Dairy
   {.list}
   
   <ul class="list">  ← HTMLも書ける
     <li>Fruit</li>
     <li>Dairy</li>
   </ul>
   

ショートコードで書く

ショートコードとは、Hugoや各種テーマによって事前定義されたHTMLのスニペットです。 マークダウンだけでは表現が難しい動画やインスタグラム/ツイッター記事の埋め込み、サーバ処理を必要とする原稿パスからのリンク生成などがあります。 詳細は下記を参照してください。