hugoにソースコードを掲載するためのショートコードを作成した

記事内に商品プロモーションを含む場合があります。
最終更新日:2020年11月5日

コードを記事に載せるとき、実行可能なファイルの内容を記事にしたほうがメンテナンスしやすいなと思い、作ってみました。

使い方

{{< code python “./path/to/hello.py” >}}

※hugo の記事に shortcode の呼び出しコードを書くの難しいなぁ。

コード

shortcode の中身は次のようになります。

ソースファイルを読み込んだあとは、もともと用意されている highlight を使ってシンタックスハイライトを行うようにしています。

なので、highlight に対応するパラメータを渡すようにしています。

ファイルは./layouts/shortcodes/code.htmlという名前にしました。

{{ $type := .Get 0  }}
{{ $file := .Get 1 }}
{{ $opt := .Get 2 }}
{{ $code := readFile $file }}
{{ highlight $code $type $opt }}
hugoで目次(tableOfContents)を表示する方法

hugoで目次(tableOfContents)を表示する方法

hugoのコードブロックをハイライトする方法

hugoのコードブロックをハイライトする方法

hugoのsummaryで出力される文字数を指定した値にする方法

hugoのsummaryで出力される文字数を指定した値にする方法

HUGOで必要最低限なサイトマップを作る

HUGOで必要最低限なサイトマップを作る

hugoで生成した静的ページをCircleCIでさくらのレンタルサーバへ自動アップ

hugoで生成した静的ページをCircleCIでさくらのレンタルサーバへ自動アップ

hugoのshuffleを使って記事の並び順をランダムにする方法

hugoのshuffleを使って記事の並び順をランダムにする方法

hugoのserverコマンドで使えるオプションをまとめた

hugoのserverコマンドで使えるオプションをまとめた

hugoのarchetypeを使って記事のテンプレート

hugoのarchetypeを使って記事のテンプレート

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

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

ubuntu 16.04 LTSに最新のhugoをインストールする方法

ubuntu 16.04 LTSに最新のhugoをインストールする方法