はじめに
Hugoを利用して記事を書く際、表示方法を微調整したい場面は少なくない。例えば、コードブロックに行番号を付けたり、Markdownの改行ルールを変更したりする場合だ。この記事では、markup設定を活用し、こうした要望を実現する方法を詳細に解説する。
よくある悩みと解決策
-
コードブロックに行番号を付けたい
行番号があると、コードの各行を簡単に参照できるため、特に技術記事で役立つ。 -
HTMLタグを使いたいが、セキュリティが心配
Hugoではセキュリティを保ちながらHTMLタグを使用するためのオプションが用意されている。 -
Markdownの改行ルールを調整したい
自動改行を有効化することで、Markdownの記述をさらに簡略化可能だ。
必要な環境
以下の環境があれば、markup設定を試すことができる。
| ツール | バージョン | 備考 |
|---|---|---|
| Hugo | 0.112+ | 最新バージョン推奨 |
| エディタ | 任意 | 設定ファイル編集用 |
設定内容の詳細
Hugoの設定ファイル（config.tomlまたはconfig.yaml）で変更可能なオプションを、highlightとgoldmarkのセクションに分けて説明する。
highlightセクション
1. 言語推測 (guessSyntax)
コードブロックで言語が指定されていない場合でも、Hugoが自動で適切な言語を推測し、シンタックスハイライトを適用する。
highlight:
guessSyntax: true- 推測精度が高いが、特定の言語を確実に表示したい場合は明示的な指定が望ましい。
2. 行番号を表示 (lineNos)
コードブロックの行番号表示を制御する。
highlight:
lineNos: true- 行番号があると、コードを説明しやすくなる。
3. CSSクラスの使用 (noClasses)
スタイル適用にCSSクラスを使用するか、インラインスタイルを利用するかを選択できる。
highlight:
noClasses: false- クラスを有効化すると、スタイルを柔軟に調整可能だ。
4. 行番号の位置 (lineNumbersInTable)
行番号をコード横に表示するか、テーブル形式で分離するかを指定する。
highlight:
lineNumbersInTable: false- テーブル形式は行番号が見やすいが、シンプルな見た目を好むならコード内表示を選ぶ。
goldmarkセクション
1. HTMLタグの許可 (renderer.unsafe)
Markdown内でHTMLタグを使用する場合に必要な設定。
goldmark:
renderer:
unsafe: true- HTMLタグが許可されれば、埋め込みコンテンツ（例: YouTube動画）が簡単に追加可能。ただし、セキュリティには注意。
2. 自動改行 (parser.hardLineBreak)
Markdownの行末改行を自動的に
goldmark:
parser:
hardLineBreak: true- 記述が簡略化され、柔軟な記事作成が可能となる。
すべての設定を統合した例
以下に、markup設定の完全な例を示す。
markup:
highlight:
guessSyntax: true
lineNos: true
noClasses: false
lineNumbersInTable: false
goldmark:
renderer:
unsafe: true
parser:
hardLineBreak: trueまとめ
| 設定項目 | 概要 | 有効 (true) |
無効 (false) |
|---|---|---|---|
guessSyntax |
言語推測 | 自動で言語を推測 | 明示的な指定が必要 |
lineNos |
行番号の表示 | 行番号が表示される | 行番号が非表示 |
noClasses |
CSSクラスの利用 | インラインスタイルで簡易的に動作 | 外部CSSで柔軟に調整可能 |
lineNumbersInTable |
行番号の表示形式 | テーブル形式で整然と表示 | コード内に直接表示 |
renderer.unsafe |
HTMLタグの使用許可 | HTMLがそのままレンダリングされる | HTMLが無効化され、セキュリティが向上 |
parser.hardLineBreak |
Markdownの改行挙動を変更 | 自動で改行を反映 | 標準のMarkdown仕様を適用 |
これらの設定を適切に活用することで、Hugoでの執筆がより効率的かつ快適になる。プロジェクトに最適な設定を選択し、Hugoの可能性を最大限に引き出そう。
コメント