はじめに
本記事は以下を参考にしている
背景
技術的なメモを書くときにコードブロックを使うことが多くある。 デフォルトではsyntax highlightが有効になっていないため、有効にする方法をまとめる。
手順
テーマを有効化する
下記コマンドを実行して設定ファイルを生成する。
下記 [theme name] の部分はPygments style gallery!から選択する。
$ hugo gen chromastyles --style [theme name] > static/css/syntax-highlight.css
config.tomlを編集する
以下内容を config.toml に追加する。
pygmentsUseClasses=true
pygmentsCodefences=true
さらに config.toml 内の customCSS に上で生成したファイルを追加する。
customCSS = ["/css/syntax-highlight.css"]
個人的な注意は、上記 では static ディレクトリにファイルを生成しているが、直前の記述の通り /css/syntax-highlight.css のように static を省くこと。
結果
Markdownファイル以下のように記載すると
```c
#include <stdio.h>
int main(int argc, char **argv){
printf("Hello World\n");
return 0;
}
```
ブラウザ上では次のように表示されるようになる。
#include <stdio.h>
int main(int argc, char **argv){
printf("Hello World\n");
return 0;
}
今後の目標
qiitaのMarkdown記法のようにファイル名を表示できるようにしたい。