gist-itでgithubのコードをブログに埋め込む
gist-it.appspot.com - Embed files from a github repository like a gist
github 上のコードをブログに埋め込むための Web サービスを紹介します。
gits-it とは
github 上のコードをブログに埋め込むための Web サービスです。 以下の特徴があります。
記法
コードを表示したいところに <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 上のパスであればどこでも構いません。 ブランチやタグ、コミットを指定することもできます。 以下のいずれも有効です。
- https://github.com/taturou/lotus_sample_onefile/blob/master/LICENCE
- https://github.com/taturou/lotus_sample_onefile/blob/article1/LICENCE
- https://github.com/taturou/lotus_sample_onefile/blob/9b726b4f072037ac86459dd04ba3ef961d93f02c/LICENCE
master しか指定できない場合、内容が変わってしまう可能性があるので、これは便利です。
あとがき
はてなブログは、はてな記法のスーパーpre記法や、Markdownのコードブロックでコードを綺麗に見せることができます。しかし、コードが github にある場合はそれをコピペしてくる必要があります。
その点、gits-it なら github 上のファイルをそのまま見せることができますし、シンタックスハイライトも効きます。 また、ブログで紹介したコードを github に置いている場合に、両者の内容が乖離することもありません。
プログラミング系のブログにはもってこいのサービスではないでしょうか。