コマンド実行例のコードブロック
Hugo のコードブロックにコマンド実行例をいい感じに表示したいと思いました。そこで実行例を記載するための render hook を作成しました。
目的
Hugoのコードブロックにコマンドを実行したときのサンプルを書くことがあるが、再度同じことをしようとコピーするとプロンプト記号の部分が付いて実行前に編集が必要になることがある。
そこで、プロンプト記号でコマンド部分と実行結果が分かるようにしつつ、コピー結果にプロンプトが含まれないようにした。
ls /
bin cdrom etc lib lost+found mnt proc root sbin srv tmp var
boot dev home lib64 media opt reposit run snap sys usr方法
Hugo のrender hookを使ってコードブロックの頭に CSS でプロンプト記号を加えるようにしました。
render hook の作成
コードブロックに言語を指定するのと同じくcommandと指定したときにコマンド実行例のコードブロックと認識して HTML を作成するようにlayouts/_default/_markup/render-codeblock-command.htmlを作成します。render-codeblock-KEYWORD.htmlのKEYWORDが言語指定のキーワードになっています。
<div class="command">{{- highlight .Inner "bash" -}}</div>CSS の作成
作成されたコマンド実行例用のコードブロックを CSS で修飾します。CSS は、staticディレクトリに置きます。
.command code > span:first-child:before {
color: hwb(61 0% 6%);
margin-right: 0.2em;
content: "$";
}
.commands code > span::before {
color: hwb(61 0% 6%);
margin-right: 0.2em;
content: "$";
}またこの読み込ませる CSS ファイルをconfig.tomlの[Params]で指定します。この指定方法は theme 毎に異なる可能性がありますが、私が使っているテーマでは、次のように指定しました。
[Params]
customCSS = ["custom.css"]入力例
コマンド例のブロックを作成するためには、次のように書きます。
```command
ls /
bin cdrom etc lib lost+found mnt proc root sbin srv tmp var
boot dev home lib64 media opt reposit run snap sys usr
```すると次のように表示されます。
ls /
bin cdrom etc lib lost+found mnt proc root sbin srv tmp var
boot dev home lib64 media opt reposit run snap sys usr複数コマンドの場合
実行例は不要だが、複数のコマンドを提示したい場合があります。その場合にはcommandsで指定するため、layouts/_default/_markup/render-codeblock-commands.htmlを作成しました。CSS は、上の CSS に含まれています。
<div class="commands">{{- highlight .Inner "bash" -}}</div>コード例
```commands
sudo apt update
sudo apt dist-upgrade
```sudo apt update
sudo apt dist-upgrade