この記事では、gist-itを用いてgithubのソースコードをサイトに埋め込む方法についてまとめました。
## gist-it
gist-itとは、githubにあるソースコードをWebサイトに埋め込んで表示できるサービスです。
【表示例】
【主な機能】
・自動で言語に応じてハイライトしてくれる
・githubのリンクを下部に付けてくれる
## 埋め込み手順
①コードを表示させたい場所に以下のスクリプトをHTML内に埋め込みます。
パスには、githubのソースコードのURLを入れます。
【書式】
<pre title="http://gist-it.appspot.com/パス"></pre>
【例】先程の表示例の場合
<pre title="github/PrinzEugen7/Lesson/blob/master/Javascript/array/sortAscendingNum.js"></pre>
②これだけで指定したパスにあるソースコードを表示できます。
## カスタマイズ
カスタマイズ方法をまとめました。
①コードを一部分だけ表示したい場合はパスの後に「?slice=n:m」を付けます。
するとn行~m行まで表示されます。
【例】0~5行のみ表示させる場合
<pre title="http://gist-it.appspot.com/パス?slice=0:5"></pre>
②ソースコードの下にある「フッター(リンクなど)」を消したい場合は、「footer=0」と入れます。
<pre title="http://gist-it.appspot.com/パス?slice=0:5&footer=0"></pre>
【関連記事】
【画像処理入門】アルゴリズム&プログラミング
コメント