githubで管理されているソースコードをサイトに埋め込む

githubで管理されているソースコードをサイトに埋め込む

githubに保存されているソースコードをwebサイトに表示する方法を備忘録として紹介します。
githubのソースコードが修正されると、webサイト側のソースコードも修正されるので、便利な方法で活用しています。



githubのソースコードを表示する

以下の記述をすると、記述した箇所にgithubのソースコードを表示することができます。

<script src="https://gist-it.appspot.com/【 表示したいソースコードのgithubのURL 】"></script>

パラメータにより表示方法を変更する

最初に紹介した方法で表示すると以下のようになります。


フッターを非表示にする

フッターを非表示をするにはパラメータ「?footer=no」とつけます。
ソースコード・結果は以下のようになります。

<script src="https://gist-it.appspot.com/【 表示したいソースコードのgithubのURL 】?footer=no"></script>

特定の行数を表示する

ソースコードの特定の箇所だけを表示するには「?slice=a:b」とつけます。
このパラメータでは(a+1)行目〜b行目(ここに気をつけてください!)までが表示されます。
2〜4行目だけを表示するソースコード・結果は以下のようになります。

<script src="https://gist-it.appspot.com/【 表示したいソースコードのgithubのURL 】?slice=1:4"></script>

上記をふまえて、フッターを非表示にして、特定の行数だけを表示するには、以下のようにします。

<script src="https://gist-it.appspot.com/【 表示したいソースコードのgithubのURL 】?footer=no&amp;slice=1:4"></script>

このようにgithubを利用して、簡単にソースコードをwebサイトに表示できます。

arrow_circle_up