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

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

HUGO関連記事










これからブログなどのサイトを作りたいと思っている人は、お名前.comでのドメイン取得がオススメです。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■
     ■お名前.com

アマゾンの2019年本屋大賞一覧

そして、バトンは渡された
ひと
ベルリンは晴れているか
熱帯
ある男

楽天市場のおすすめ商品一覧

お金2.0 新しい経済のルールと生き方 [ 佐藤航陽 ]
全部レンチン!やせるおかず 作りおき 時短、手間なし、失敗なし
「読む力」と「地頭力」がいっきに身につく 東大読書 [ 西岡 壱誠 ]