プログラムを中心とした個人的なメモ用のブログです。 タイトルは迷走中。
内容の保証はできませんのであしからずご了承ください。

2016/09/13

GitHub Gist のコードをブログへ埋め込むいろいろな方法

event_note

ブログなどにソースコードを載せる際、GitHub Gist を利用するととても便利です。
ここでは GitHub Gist のコードのいろいろな埋め込み方法をまとめてみます。

ファイル名を指定

ファイル名の最後に ?file=ファイル名 を追加すると、そのURLの中の特定のファイルだけを埋め込むことができます。
以前は1ファイルごとに New Gist から作成していたのですが、この方法を知ってからは出来る限りファイルをまとめて登録するようになりました。

しかし、デフォルトで出来るのはこれだけのようです。
その他の埋め込み方をするために gist-embed というのがあるようです。
これを使えば、例えば特定の行だけ埋め込んだり、ハイライトしたり、いろいろな埋め込み方ができます。

gist-embed の使い方

以下のページに使い方とサンプルがあります。

以下、個人的によく使うものを抜粋しておきます。

基本

<code data-gist-id="ID"></code>

ファイルの指定

data-gist-file="ファイル名"

フッターを消す

data-gist-hide-footer="true"

表示する行を指定

data-gist-line="2"
data-gist-line="2-4"
data-gist-line="1,3-4"

行のハイライト

data-gist-highlight-line="1,3,5"