【gist-it】githubのソースコードをサイトに埋め込む方法

この記事では、gist-itを用いてgithubのソースコードをサイトに埋め込む方法についてまとめました。

gist-it

gist-itとは、githubにあるソースコードをWebサイトに埋め込んで表示できるサービスです。

【表示例】

【主な機能】
・自動で言語に応じてハイライトしてくれる
・githubのリンクを下部に付けてくれる

①コードを表示させたい場所に以下のスクリプトをHTML内に埋め込みます。
パスには、githubのソースコードのURLを入れます。

【書式】

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

【例】先程の表示例の場合

<script src="https://gist-it.appspot.com/github/PrinzEugen7/Lesson/blob/master/Javascript/array/sortAscendingNum.js"></script>

②これだけで指定したパスにあるソースコードを表示できます。

カスタマイズ方法をまとめました。

①コードを一部分だけ表示したい場合はパスの後に「?slice=n:m」を付けます。
するとn行～m行まで表示されます。

【例】0～5行のみ表示させる場合

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

②ソースコードの下にある「フッター（リンクなど）」を消したい場合は、「footer=0」と入れます。

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