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

記事内に商品プロモーションを含む場合があります。

2018.5.9 11 views

はじめに

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

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

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

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

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

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

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

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

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

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

{{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 }}

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