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をブログなどに埋め込みます。

Advertisements

ToolGitHub

Posted by codive