[Gist] gist-embedの使い方を調べてみた (1) 〜 id, file, caption, hide-footer 〜



Nプログラマ(@Nprog128)です。

今回はgist-embedの使い方についてのメモリアです。

作者さんのリポジトリが変わってました

作者さんのリポジトリが変わっていて古い方はjQueryが必要でしたが、新しい方は不要みたいです。

追加するcdnのscriptタグも新旧で変わっているので、githubリポジトリのreadmeを確認しましょう。

こちらのスクリプトは、gistの埋め込みソースコードに対してオプションを指定することにより色々な表示ができます。

なプ

ファイル単位での表示、フッターを隠すなどなど、、、

オプションの使い方が分からなかったので、公式をサンプルを読みながら少しずつ使ってみました。

gist-embedに指定できるオプションは結構多いので、今回取り扱うのは以下の通りです。

オプション属性 できること
data-gist-id 表示するgistのidを指定
data-gist-file 指定したファイル名を表示
data-gist-caption キャプションを表示する
data-gist-hide-footer フッターを非表示にする
なプ

それではいってみましょう!

概要

目標

  • gist-embedのオプションの使い方を調べて使ってみる

  • オプション

    • data-gist-id
    • data-gist-file
    • data-gist-caption
    • data-gist-hide-footer

gist-embedの作者様

作者様のgithubは こちら です。

とても便利で当ブログでも利用させて頂いていた時期があり、unityの記事とかに使っていました。

なプ

今はhugoのSyntax Highlightingを使っています。

使い方の説明はgithubリポジトリのindex.htmlにあります。

githubから見るとソースコードとしての表示になりますので、サンプルを見るためにはリポジトリをcloneしてindex.htmlをブラウザにドラッグ&ドロップすればオッケーです。

備考: リポジトリが変わったみたいです。

最近githubのリンク先が404になっていて、あれ?公開終了したのかな?、と思ってちょっと調べてみました。

検索してみると同じようなリポジトリが見つかり、READMEを確認すると404になっていたリポジトリと同じみたいです。

なプ

実装も変わったみたいで、バニラJSで書き直しされたみたいです。

移行した理由は新しいリポジトリのREADME QA内に記載されていました。

blockquoteの画像

My old github account couldn’t be recovered, so starting with a new repo here.

blockquoteの画像

古いgithubのアカウントを復元できなかったのでこちらの新しいリポジトリで始めました、というような内容が記述されています。

準備

githubのアカウント

gistを利用するためには、 github のアカウントが必要になります。

githubは2019年1月頃に、無料でprivateリポジトリが利用可能になって話題になりましたね。

スクリプトの準備

gist-embedを使うために必要なファイルを読み込みます。

古いリポジトリ版(jQuery依存)

公式README.mdのInclude jQuery and gist-embed srcの項目にあるコードをheadタグ内に埋め込みます。

<script type="text/javascript” src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script type="text/javascript” src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.7.1/gist-embed.min.js">

利用するバージョンに注意しましょう。バージョンによって利用できないオプションがあります。 (2.6から利用できるようになったdata-gist-enable-cacheなど)

なプ

以前はこんな風に使っていました。

新しいリポジトリ版

githubのREADME > Usage > Add script tagの項目に、追加するscriptタグが記載されています。

1<script
2  type="text/javascript"
3  src="https://cdn.jsdelivr.net/npm/gist-embed@1.0.4/dist/gist-embed.min.js"
4></script>

これをheadタグ内などに記載して、準備完了です。

gistのサンプルコード

gistにアップロードしたファイルです。

このコードはgistページのembededから取得したリンクになります。
(まだgist-embedを使っていない状態)

コード

gistの埋め込みリンク コードを開く
gistの埋め込みリンク
1<script src="https://gist.github.com/nprog256/8cdaee4d7cbb7b77f0b1bf1656018aed.js"></script>

結果

これをこのまま埋め込むと、こんな風に表示されます。

この表示結果をgist-embedライブラリを使って、色々な表示を試していきます。

gist-embedのオプションを使っていく

ここからは先程のgistに対してgist-embedのオプションを使って、色々な表示を試していきます。

(1) data-gist-id: 表示するgistのidを指定

gist-embedを使う時に必ず指定する属性です。

これのみの指定だと先程のサンプルコードと同じで、gistに登録した1つのリポジトリ内のファイルをすべて表示します。

指定するidについてですが、このidはgistコードのURLの末尾に表示されているIDのことです。

今回のgistのURLを例にすると、https://gist.github.com/nprog256/8cdaee4d7cbb7b77f0b1bf1656018aedを使っていますので、idは末尾の8cdaee4d7cbb7b77f0b1bf1656018aedになります。

コード

data-gist-idを指定 コードを開く
data-gist-idを指定
1<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed"></code>

結果

指定するidを間違えていると表示されないので注意しましょう。

(2) data-gist-file: ファイル単位の表示

gistのリポジトリ内にある指定したファイルを表示します。

なプ

ファイル単位の表示は便利!

先程はgistの中に2つのファイル(README.MDとsample.php)がありましたが、今回はsample.phpのみが表示されています。

コード

1<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-file="sample.php"></code>

結果

なプ

さっきはREADME.MDも表示されていましたね。

(3) data-gist-caption: キャプションを表示する

コードの先頭にキャプションを表示します(デフォルトでは非表示)

data-gist-caption属性に表示したい文字列を渡すことで表示できます。

1<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-file="sample.php" data-gist-caption="キャプションです"></code>

キャプションの表示と非表示を比べてみます。

キャプションを表示版

ソースコードの一行目の上に、キャプションですと表示されていますね。

キャプションを非表示版(デフォルト)

こちらは何も指定していないので、キャプションは表示されていません。

これを使うとフッターの表示 or 非表示の設定ができます。

なプ

hosted with ❤ by GitHubと表示されている部分ですね。

これはデフォルトで表示するようになっているので、非表示にしたい時にデータ属性にtrueを設定します。

コード

1<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-file="sample.php" data-gist-hide-footer="true"></code>

フッターを表示(デフォルト)

フッターを非表示

フッターが非表示になっていることを確認できました。

終わりに

今回は、gist-embedのオプションの使い方を調べてみた、という内容でした。

  • data-gist-id
  • data-gist-file
  • data-gist-caption
  • data-gist-hide-footer

今まではファイル単位での表示しか使ったことがないのですが、キャプションやフッターの表示を制御できると見栄えが変わっていいなと思いました。

なプ

次回は、行番号指定あたりのオプションを調べて使ってみます。

それでは、このへんで。
バイナリー!

\ ちょっとお買い物 /