Hugo で作成した記事内のコードブロックに Syntax Highlight CSS を当てる
2019-12-27主に技術ブログを書く際に、コードやターミナルの出力結果をコードブロックとして表示したい場面があります。 今回は、 Hugo で作成したブログの記事内で、コードブロックに良い感じに Syntax Highlight CSS を当てる方法を整理してみます。
前提
- Hugo のバージョン :
0.60.0以降 - Markdown parser : goldmark
Hugo の Markdown parser は、0.60.0以降、それ以前の blackfriday から goldmark に変更されており、 blackfriday を使用したい場合はconfig.tomlにて明示的に指定しなければいけなくなりました。 - 使用する theme : indigo
※ここは実際に使用している theme に適宜置き換えて読んでください
Syntax Highlight 用の CSS を生成する
まずは Syntax Highlight 用の CSS を生成します。
といっても、下記のコマンドを実行するだけです。
$ hugo gen chromastyles --style=github > ./static/css/syntax.css
あとは、生成されたファイルを読み込むように ./themes/indigo/layouts/partials/head.html 内に下記を追記します。
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/syntax.css" />
以上で Syntax Highlight の準備が整いました。
Chroma Style Gallery
CSS 生成コマンドの --style=github の部分で、 Syntax Highlight のスタイル (Chroma Style) を指定しています。この部分を変更することで、さまざまなスタイルの Syntax Highlight を表現することができます。
スタイルの一覧は
Chroma Style Gallery
で確認できるので、好みのスタイルを探して --style オプションで指定します。
Markdown で装飾する
Markdown でコードブロックを表現する際には、下記のように記述します。 (Python のスクリプトの場合)
```python
import json
def lambda_handler(event, context):
# TODO implement
return {
'statusCode': 200,
'body': json.dumps('Hello from Lambda!')
}
```
上の Markdown は下記のように表示されます。
import json
def lambda_handler(event, context):
# TODO implement
return {
'statusCode': 200,
'body': json.dumps('Hello from Lambda!')
}
Hugo では、行番号を表示したり、特定の行に網掛けをつけることができます。
行番号を表示する
行番号を表示したい場合は、下記のような記述をします。
```python {linenos=true}
import json
def lambda_handler(event, context):
# TODO implement
return {
'statusCode': 200,
'body': json.dumps('Hello from Lambda!')
}
```
上の Markdown は下記のように表示されます。
1import json
2
3def lambda_handler(event, context):
4 # TODO implement
5 return {
6 'statusCode': 200,
7 'body': json.dumps('Hello from Lambda!')
8 }
特定の行に網掛けをつける
特定の行に網掛けをつけたい場合は、下記のような記述をします。
```python {hl_lines=[1, 3, "5-8"]}
import json
def lambda_handler(event, context):
# TODO implement
return {
'statusCode': 200,
'body': json.dumps('Hello from Lambda!')
}
```
上の Markdown は下記のように表示されます。
import json
def lambda_handler(event, context):
# TODO implement
return {
'statusCode': 200,
'body': json.dumps('Hello from Lambda!')
}
もちろん、行番号表示との併用も可能です。
```python {linenos=true, hl_lines=[1, 3, "5-8"]}
import json
def lambda_handler(event, context):
# TODO implement
return {
'statusCode': 200,
'body': json.dumps('Hello from Lambda!')
}
```
1import json
2
3def lambda_handler(event, context):
4 # TODO implement
5 return {
6 'statusCode': 200,
7 'body': json.dumps('Hello from Lambda!')
8 }
※Syntax Highlight のテーマによっては網掛けで見辛くなることがあります
また、 Syntax Highlight に対応した言語とその指定方法については Hugo の公式ドキュメントを確認してください。
まとめ
Hugo で作成したブログの記事内でコードブロックに良い感じに Syntax Highlight CSS を当てる方法について整理してみました。
静的サイトジェネレータは Markdown で簡単に記事が作成できる分、ちょっとした装飾や見た目のカスタムが地味に面倒だったりします。 Hugo のコードブロックについても、バージョン 0.60.0 より前では自分でショートコードを作って対応する必要がありました。
それが 0.60.0 以降では今回のように簡単にコードブロックを装飾できるようになったので、特に技術ブログでは恩恵を受けられると思います。
Markdown でブログか聞きたいけど、はてなとか WordPress は編集画面がもたつくし、そもそもページの表示も高速にしたい！という方はぜひ Hugo でブログ書きましょう。
comments powered by Disqus