むにえる牧場

毎日むにえるをつくっています

【gist-it】はてなブログにGitHubのコードを貼り付ける

はじめに

ブログにコードを貼り付けたいが、わざわざGistをつくるのも面倒くさい。
ブログに直接貼り付けてもいいけど、せっかくだからGitHubにリンクする形式で貼り付けたい。
そんなことがあると思います。
そんなときに便利なサービスがこちら。

gist-it.appspot.com

GitHubに上げているコードをブログ本文に埋め込めるサービスです。
実際に使うとこんな感じの表示になります。

gist-it

使い方

利用方法は、ブログの本文に以下のコードを挿入するだけです。

<script src="https://gist-it.appspot.com/github/{ユーザー名}/{リポジトリー名}/blob/{ブランチ名}/{ファイルパス}"></script>

行番号を指定する

クエリを追加で指定すれば行を指定してコードを貼り付けることもできます。

<script src="https://gist-it.appspot.com/github/{ユーザー名}/{リポジトリー名}/blob/{ブランチ名}/{ファイルパス}?slice=1:5"></script>

実際の見た目はこんな感じに

フッターの表示を変える

こちらもクエリを追加すると、フッターの表示を変更できます。

<script src="https://gist-it.appspot.com/github/{ユーザー名}/{リポジトリー名}/blob/{ブランチ名}/{ファイルパス}?footer=no"></script>

上記のサンプルはフッターを表示しないようにするものです。
見た目はこんな感じ。

ミニマムな表示にもできます。(フッター左側のgist-itという表示が消えるだけ)

<script src="https://gist-it.appspot.com/github/{ユーザー名}/{リポジトリー名}/blob/{ブランチ名}/{ファイルパス}?footer=minimal"></script>

利用時の注意点

ブログ記事に載せるときにbranchを切ること

当たり前といえば当たり前なのですが、ブログに載せるとき、masterブランチを指定していると、その後コードを更新して記事内容と差異が生まれてしまいます。
ブログに載せるようにbranchを切ってしまった方が良さそう。

https:// にすること

公式のドキュメントでは http://gist-it~ と紹介されていますが、https://gist-it~ にしないと表示されません。
ぱっと見で気付けないので要注意。

おわりに

シンタックスハイライトが微妙だったり、行番号が表示されていなかったりと見た目的に微妙な点はあります。
しかし、GitHubのコードをそのまま貼り付けられるのは利点だと思います。
フッターからリポジトリーに直接飛べるのも良い感じ。

Gistにあげるのが面倒に感じたとき使ってみてはいかがでしょうか。

参考サイト