hugoのショートコードを使ってコードの掲載を効率化

2018.5.9

はじめに

プログラムの紹介をするとき、コードをテキストで記事に貼り付けるのは面倒。

「実行可能なプログラムをまるごと載せたい」

記事にコードを貼り付けてしまうと、コードのメンテナンスが手間です。

少し修正したいと思ったときに、

  1. コードを修正
  2. コードを実行
  3. 結果を確認
  4. 記事のコードを修正

このような手間が発生します。

  1. コードを修正
  2. コードを実行
  3. 結果を確認

コードの管理方法にもよりますが、こうすれば一手間減らすことができます。

プログラムファイルを読み込ませて記事とは独立して管理したいと考えています。

プログラムは別ファイル

幸い hugo には外部のファイルを読み込ませる仕組みがあるので、この機能を利用したいと思います。

https://gohugo.io/functions/readfile/

ここに書かれている内容で、ファイルを読み込ませて見たいと思います。

例では、下記のように書かれています。

{{readFile "README.txt"}} → "Hugo Rocks!"

README.txt というファイルを読み込んで、内容を表示できるようです。

ショートコードを使う

外部ファイル読み込む方法をショートコードと組み合わせることで、記事にコードを乗せるのが更に効率化できます。

{{< test src="/src/hello.py">}}

js 製のハイライトを使うのであればパラメータにコードの種類を追加して、ショートコードで生成される HTML タグのクラスに指定させる方法も良さそうです。

ショートコードファイルは、layouts\shortcodes

scode.htmlというファイルを作成して下記のようなコードを書いておきます。

{{ with .Get "src" }}
<pre>
    <code>{{ readFile . }}</code>
</pre>
{{ end }}

これで、プログラムのソースコードファイルを直接参照させて記事にできそうです。

関連記事