jekyllなブログにgistを貼る

このブログはjekyllを使っています。

これまでにいくつかの記事を書いてきて、記事の中にgistを貼れたら便利だな、 と思い、その方法を調べたので纏めておきます。

jekyll-gistプラグイン

jekyllなサイトのページにgistを貼るには、jekyll-gistというプラグインを使うと楽チン。

導入

Gemfileに以下を追記し、bundle installする。 これは、jekyllのプロジェクトを、以前書いた「jekyllのプロジェクトをGemfileとbundlerで管理する」に 則って管理しているため。

group :jekyll_plugins do
  gem 'jekyll-gist'
end

設定

_config.ymlに、

gems:
  - jekyll-gist

を追記する。

記事に貼る

記事のMarkdownファイルの中のgistを貼りたい場所に、次のLiquidのタグを書く。

{% raw %}
{% gist shimar/b184cdb21b9a0cdc285769852e899822 %}
{% endraw %}

指定するのは、gistのURLの"ユーザ名/gistID"の部分。

すると、これは、

<script src="https://gist.github.com/shimar/b184cdb21b9a0cdc285769852e899822.js"></script>

というHTMLに変換されて、ページにgistが埋め込まれる。

サイトをGithub Pagesで運用している場合も、きちんと表示されました。

プラグインのおかげで、とても簡単です。