良くブログにコードを埋め込むが，時間とともにそのコードのバージョンが古くなることがある。 場合によっては書いた当時のまま残ってくれたほうが良い場合もあるのだろうが， 最新版の変更を反映させるのも面倒だ。
そこで，Githubでバージョン管理されているコードをブログへ埋め込む方法を検討した。 方法は2つあり，Gistか，gist-itという外部サービスを利用できる。
Gistを使う
Gistならば，公式でJavascirptのコードを配布しているため下記のようなコード1行で埋め込める。ちなみに埋め込んだコード自体は awscliを使って楽にEC2へSSHできるMakefileを書いてみた | 電脳手帳 で書いたMakefileだ。
<script src="https://gist.github.com/tsuyukusa/72f18c85cb80a57f7058df05300de803.js"></script>
もし横幅等のスタイルを改変しようと思ったら，CSSで指定すればいいだろう。 HTMLのタグ等の情報は直接 https://gist.github.com/tsuyukusa/72f18c85cb80a57f7058df05300de803.js を開いてみればわかる。
document.write('<link rel="stylesheet" href="https://assets-cdn.github.com/assets/gist-embed-ff99cd9ef334f32a3abd8cb08a3fe7caaae2a9a365b37fb0b498799afc3a8867.css">')
document.write('<div id=\"gist38190916\" class=\"gist\">\n <div class=\"gist-file\">\n <div class=\"gist-data\">\n <div class=\"js-gist-file-update-container js-task-list-container file-box\">\n
....以下略
gist-itを使う
GistではなくGithubのファイルを参照するには， gist-itというサービス を使えば良いようだ。
使い方は簡単で， <script src="http://gist-it.appspot.com/http://github.com/$file"></script> というコードを埋め込むだけ。
その他のオプションについては以下のサイトがわかりやすい。
gist-itでgithubのコードをブログに埋め込む - T time
ちなみにgist-itのサーバサイドのコードはGithubで公開されている。 外部サービスの永続性に不安があるなら自分でホストできるだろう。
robertkrimen/gist-it: An AppEngine app to embed files from a github repository like a gist
Comments !