acokikoy's notes

{"勉強中":"Python","注目":"Shopify","LOVE♡":["ABARTH595","TA-GG9","Ukulele","Movable Type","ガーナ ミルクチョコレート"]} なWebディレクター

gist-itを使って、はてなブログにGitHub上のコードをGist風に埋め込む方法

gist-it を使うと、GitHub上のコードの任意範囲を はてなブログに埋め込むことができる。
オプション値指定サンプルを交え、使い方を説明する。

gist-it.appspot.com - Embed files from a github repository like a gist

書式

<script src="https://gist-it.appspot.com/github/$file?slice=n:m&footer=xx"></script>
  • $file 部分は、GitHubリポジトリのパス $user/$repository/raw/master/$path が入る
  • はてなブログSSLページ)に埋め込むなら、URIスキーム部分は"https" でないとダメ。"http://ほにゃらら” だとコードがうまく表示されない。*1
  • slice=n:m オプション
    n行目から(m-1)行目だけ表示する。mを省略すると指定の1行だけを表示
    • slice=0 1行目だけ表示
    • slice=5:10 5 - 9行目を表示
    • slice=140:-10 140行目 - 下から11行目までを表示
  • footer=xx オプション
    フッタ部表示制御
    • footer=no フッタなし
    • footer=0 フッタなし
    • footer=minimal "This Gist brought to you by gist-it."リンクなし

サンプル

slice=0 1行目だけ表示

<script src="https://gist-it.appspot.com/github/acokikoy/my-pylog-to-mt/blob/master/mt.py?slice=0"></script>

上記のようにslice=n オプションを書くと、次のように n行目1行だけが表示される。

slice=5:10 5 - 9行目を表示

<script src="https://gist-it.appspot.com/github/acokikoy/my-pylog-to-mt/blob/master/mt.py?slice=5:10"></script>

上記のようにslice=n:m オプションを書くと、次のようにn行目から(m-1)行目までが表示される。

slice=140:-10 140行目 - 下から11行目までを表示

<script src="https://gist-it.appspot.com/github/acokikoy/my-pylog-to-mt/blob/master/mt.py?slice=140:-10"></script>

上記のようにslice=n:m オプション値にマイナスの数値を使うと、末尾から数えた行数で指定できる。

footer=no フッタなし

<script src="https://gist-it.appspot.com/github/acokikoy/my-pylog-to-mt/blob/master/mt.py?slice=5:10&footer=no"></script>

上記のように footer=no オプションを書くと、次のようにフッタが省略される。

オプション無指定

<script src="https://gist-it.appspot.com/github/acokikoy/my-pylog-to-mt/blob/master/mt.py"></script>

slice行指定オプションを省くと、全コードが表示される。

*1:最初うまくコードが表示されずに困った。@sikeda107さんのQiita記事を参考に解決できた。感謝。
はてなブログにGithubコードを埋め込む - Qiita