T time

プログラミングや電子工作、各種ガジェットに関するブログです。

gist-itでgithubのコードをブログに埋め込む

f:id:tatur0u:20150624151120p:plain gist-it.appspot.com - Embed files from a github repository like a gist

github 上のコードをブログに埋め込むための Web サービスを紹介します。

gits-it とは

github 上のコードをブログに埋め込むための Web サービスです。 以下の特徴があります。

  • 指定の範囲だけ表示可能
  • コード表示の下にgithubへのリンクをつけてくれる(省略可能)
  • 言語に応じたシンタックスハイライト
  • ブランチ、タグを指定可能

記法

コードを表示したいところに <script></script> で埋め込みます。 範囲指定とフッター表示制御のオプションがあります。

オプション無し

<script src="http://gist-it.appspot.com/(githubのパス)">
</script>

このように、gist-it の後に表示したいパスを指定します。 以下のように表示されます。

シンタックスハイライトされているのがわかります。
表示しているのはテキストファイル(拡張子なし)なのですが何だと思って色をつけてるんでしょ? ちなみに、言語の判定は自動的に行われ、指定はできません。

範囲指定

<script src="http://gist-it.appspot.com/(githubのパス)?slice=0:5">
</script>

表示範囲を指定するには、上記のように slice=n:m を指定します。 先頭行は 0 でることに注意してください。

先ほどと同じファイルの 0行目から5行目 までを表示した結果が以下です。

フッター無し

<script src="http://gist-it.appspot.com/(githubのパス)?slice=0:5&footer=0">
</script>

footer=0 を指定することで、コード下のフッターを非表示にすることもできます。

先ほどと同じファイルの 0行目から5行目 までを、フッター無しで表示した結果が以下です。

ブランチ、タグ指定

(githubのパス) に指定するパスは、github 上のパスであればどこでも構いません。 ブランチやタグ、コミットを指定することもできます。 以下のいずれも有効です。

master しか指定できない場合、内容が変わってしまう可能性があるので、これは便利です。

あとがき

はてなブログは、はてな記法スーパーpre記法や、Markdownのコードブロックでコードを綺麗に見せることができます。しかし、コードが github にある場合はそれをコピペしてくる必要があります。

その点、gits-it なら github 上のファイルをそのまま見せることができますし、シンタックスハイライトも効きます。 また、ブログで紹介したコードを github に置いている場合に、両者の内容が乖離することもありません。

プログラミング系のブログにはもってこいのサービスではないでしょうか。