gist-it.appspot.comを使ったGitHubコードの参照方法
GitHubのコードをブログなどに埋め込むgist-itというツールが公開されています。
APIとしてURIを呼び出すだけで使うことができます。
参考:https://gist-it.appspot.com/
GitHubコードの参照
WordPressへの埋め込み
gist-itを実行するとJavaScriptが返ってきますので、そのJavaScriptが動くようにします。
WordPressのブロックエディターを使用している場合、カスタムHTMLブロックを利用します。
<script src="http://gist-it.appspot.com/github/$file"></script>
指定するGitHubのURI形式やオプションに関しては下記参照。
全文表示
https://gist-it.appspot.com/http://github.com/$file
またはショートカットとして、
https://gist-it.appspot.com/github/$file
を使うこともできます。
$fileはGitHubのリポジトリー命名規則
$user/$repository/blob/master/$path
に則る必要があります。
スライスオプション(指定行のみ表示)
スライスオプションを付けることにより、指定した行のみ表示することができます。
slice=0:-2
最初の行から、最後の行の2行前まで(該当行を含む)を表示します。
slice=24:100
24行目から100行目までを表示します。
slice=0
ファイルの最初の行のみを表示します。
フッターオプション(フッターを非表示)
フッターオプションを付けることにより、フッター情報を非表示にすることができます。
フッター情報は"This Gist brought to you by gist-it."という文字列とソースコードのへのパスが表示されます。
特別な理由がなければgist-itへの感謝の意を表すためにもフッターを表示しましょう。
footer=no
または
footer=0
フッターを隠します。
footer=minimal
“This Gist brought to you by gist-it."という文字列を削除し、フッターを表示します。
Gistコードの参照
Gistのコードを参照する場合は特にgist-itを利用する必要はなく、Gist画面に共有URLが表示されていますので、そのURLをブログなどに埋め込みます。