この記事では、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>
【関連記事】
【画像処理入門】アルゴリズム&プログラミング
コメント