やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

GitHubのコードをブログに埋め込む方法

 毎回忘れてググるのでメモ。

情報源

HTML

<script src="http://gist-it.appspot.com/github/ユーザー名/リポジトリ名/blob/master/ファイルパス"></script>

 URLを表示したいソースコードのものに変えて使う。

 なお、blobrawに置き換えても動作する。

ソースコードURL

 GitHubページでソースコードを見たときのURL。

HTML

<script src="http://gist-it.appspot.com/github/ytyaru/Shell.Raspbian.FirstSetup.20181012100000/blob/master/raspbian_first_setup.sh"></script>

簡単にいうと

 URLのgithub.com以降をコピーし、<script srcのURL/github/以降へ貼り付ければいい。

ytyaru/Shell.Raspbian.FirstSetup.20181012100000/blob/master/raspbian_first_setup.sh
<script src="http://gist-it.appspot.com/github/"></script>

こうなる

オプション

 細かい指定ができる。

オプション 説明
slice 指定した行数のみ表示する
footer フッターを非表示にする

slice

 指定した行数のみ表示する。以下のように指定できる。

クエリ 意味
slice=0 1行目のみ表示する
slice=0:-2 1行目〜下から数えて2行目より上までを表示する
slice=22:27 23〜28行目のみ表示する

 1でなく0から始まる点に注意。

slice=22:27

 たとえば先程のコードのうち、ある関数のみ表示したいときなどにsliceが使える。

<script src="http://gist-it.appspot.com/github/ytyaru/Shell.Raspbian.FirstSetup.20181012100000/blob/master/raspbian_first_setup.sh?slice=22:27"></script>

slice=22:-110

<script src="http://gist-it.appspot.com/github/ytyaru/Shell.Raspbian.FirstSetup.20181012100000/blob/master/raspbian_first_setup.sh?slice=22:-110"></script>

 負数を指定するときは、下から数えたほうが早いときのみ使うほうが自然か。

footer

クエリ 意味
footer=0, footer=no フッターを非表示にする
footer=minimal This Gist brought to you by gist-it.を付けずにフッターを表示する

footer=0

<script src="http://gist-it.appspot.com/github/ytyaru/Shell.Raspbian.FirstSetup.20181012100000/blob/master/raspbian_first_setup.sh?slice=22:27&footer=0"></script>

footer=minimal

<script src="http://gist-it.appspot.com/github/ytyaru/Shell.Raspbian.FirstSetup.20181012100000/blob/master/raspbian_first_setup.sh?slice=22:27&footer=minimal"></script>

URLの説明

 上記のURLを見ると末尾に?, =, &のような記号が使われている。クエリ文字列(クエリ・ストリング)という。HTMLでGETするときの細かい条件として与えられる。

  • URLにクエリを付与するときは、URLの末尾に?を付与する
  • クエリはkey=valueのようにキーと値を=で関連付ける
  • 複数のキーバーリューを用いるときは&で繋げる

勝手な要望

 行数の表示ができない……。

 できれば以下の機能があると嬉しい。

  • ファイル行数非表示
  • ファイル行数表示
    • ファイル行数そのまま
    • sliceした先頭行を1行目とする
  • クリップボードへコピー」ボタン

 行数までコピーされるのは嫌。

所感

 ソースコードのうち一部を表示するような使い方が想定されているのだろう。slice=m:n&footer=0の組合せが最も使いそう。