HugoのMarkdownをもっと自由に：改行のコツ

ブログ運営
2024.12.08

はじめに

Hugoは高速な静的サイトジェネレーターとして、ブログやウェブサイトの作成に広く利用されている。Markdownの処理はその中心的な要素であり、適切な設定によって生産性を大きく向上させることが可能である。

この記事では、HugoにおけるMarkdownの改行設定やHTMLタグの活用法を徹底的に解説する。

Hugo特有の改行に関する注意点

1. Markdownパーサー：Goldmarkの仕様

HugoのデフォルトMarkdownパーサーはGoldmarkで、これは公式Markdown仕様に忠実である。主な特徴を以下に挙げる。

Goldmarkのデフォルト動作

  • 行末に半角スペース2つを記述することで改行を認識する。
  • 行末に何も記述しない場合、次の行が自動的に連結される。

改行を柔軟に管理するには、Hugoの設定ファイルを編集してGoldmarkの動作をカスタマイズする必要がある。

config.yamlファイルでの設定例

Hugoの設定ファイルに必要な設定を記述することで、改行やHTMLタグの利用を簡単に制御できる。以下は具体的な例だ。

markup:
  goldmark:
    renderer:
      unsafe: true      # HTMLタグを有効化する設定
    parser:
      hardLineBreak: true  # ハードラインブレイクを有効化

各設定項目の詳細解説

  1. renderer.unsafe: true

    • Markdown内に埋め込まれたHTMLタグ（例：
      ）を有効化する。
    • HTMLタグがセキュリティの観点から無効化されるのを防ぐ設定である。

  2. parser.hardLineBreak: true

    • Markdownの行末で自動的に改行を挿入する機能。
    • スペース2つの入力を省略でき、より簡潔にMarkdownを記述可能。

設定適用後のMarkdown動作例

以下のMarkdownを用いて、新しい設定が反映された結果を確認する。

Markdownファイルの例

これは1行目です。
これは2行目です。

これはスペース2つを使った改行。  
次の行に移ります。


タグを使用する場合もあります。

これも次の行に表示されます。

出力結果（ブラウザ表示）

これは1行目です。
これは2行目です。

これはスペース2つを使った改行。
次の行に移ります。

これも次の行に表示されます。

設定によってMarkdownとHTMLが連携し、自由度が大幅に向上する。

Hugo設定の確認と適用方法

設定ファイルの編集

プロジェクトルートに配置されたconfig.yamlファイルに、以下の設定を追記する。

markup:
  goldmark:
    renderer:
      unsafe: true
    parser:
      hardLineBreak: true

動作確認手順

  1. Hugoのローカルサーバーを起動

    hugo server

    サーバーが起動したらhttp://localhost:1313/にアクセスし、設定が反映されているか確認する。

  2. テーマの影響を確認 使用しているテーマによってはCSSやテンプレートで改行が意図通りに反映されない場合がある。以下の方法で対処可能。

テーマやCSSの考慮点

1. CSSの調整

CSSのwhite-spaceプロパティを用いることで、改行の挙動を統制する。

p {
    white-space: pre-wrap;
}

この設定により、改行や空白がブラウザ上で正確にレンダリングされる。

2. テーマテンプレートの確認

テーマファイル内のテンプレートが改行処理を独自に行っている場合、それが原因で意図と異なる挙動を引き起こす可能性がある。その場合はテンプレートを編集するか、CSS設定で調整する。

まとめ

Hugoで改行やHTMLタグを自由に扱うには、以下の手順を実施することで柔軟性が大幅に向上する。

  1. config.yamlに以下を記述：

    markup:
 goldmark:
   renderer:
     unsafe: true
   parser:
     hardLineBreak: true

  2. 必要に応じてCSSでwhite-space: pre-wrap;を設定。

  3. Hugoのローカルサーバーで動作を確認。

これらの手順により、MarkdownとHTMLタグを活用した表現力豊かなウェブサイトの構築が可能になる。

コメント