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

gist Gist

Nプログラマです。

今回の内容はgist-embedの使い方についての備忘録です。
gist-embedはgistの埋め込みソースコードを、ファイル単位など色々なオプションで表示することができるスクリプトです。

オプションの使い方があまり分からなかったので、公式のサンプルを読んで分かる範囲で調べてみました。

一つの記事で作成しようとしたら、長くて読みづらくなったので分割します。
ココで取り扱うのは以下の通り。

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はこちら

https://github.com/blarvanderhoof/gist-embed

bvanderhoof/gist-embed
Lightning fast zero dependency library for embedding gists on your website - bvanderhoof/gist-embed

とても便利で当ブログでも利用させて頂いています。
unityの備忘録でも使っています。

公式の使い方の説明はgithubのtest.htmlにあります。

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

リポジトリが変わったようです。

同一であるか分からなかったのですが、readmeを読んでみると。新しい方のリポジトリ内のQAの方に、古い方のリポジトリを復元できなかったので、新しいリポジトリで始めました、というような内容が記述されています。

前提

WordPressの使用テーマ

記事を作成している時点で、わいひら様が作成されているCocoonを使用させて頂いています。
header.phpなどテーマ内のファイルの変更方法はテーマにより異なるので、置き換えて読んでいただければと思います。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

githubのアカウントは作成済み

gistを利用するためには、githubのアカウントが必要になります。
2019年1月頃に、無料でprivateリポジトリが利用可能になって話題になりましたね。

やってみる

注意

テーマ内の変更するファイルは変更前に必ずバックアップをしておきましょう。

準備

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

公式README.mdのInclude jQuery and gist-embed srcの項目にあるコードをheadタグ内に埋め込みます。
cocoonの子テーマでは、tmp/head-insert.phpに以下の記述を追加します。

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

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

更新情報は作者様のREADME.mdを確認してください。

今回のサンプルコード

gistにアップロードしてあるファイルです。
このコードはgistページのembedから取得したリンクで表示しています。
(まだgist-embedではないことに注意)

コード

<script src="https://gist.github.com/nprog256/8cdaee4d7cbb7b77f0b1bf1656018aed.js"></script>

結果

これらをgist-embedのオプションを使って色々と表示していきます。

オプション

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

gist-embedを使う時に必ず指定する属性です。
これのみの指定だと、gistに登録した1つのリポジトリ内のファイルをすべて表示します。
(今回のサンプルコードと同じ)

このidはgistコードのURLの末尾に表示されているIDのことです。
今回のgistのURLを例にすると、https://gist.github.com/nprog256/8cdaee4d7cbb7b77f0b1bf1656018aed を使っていますので、末尾の8cdaee4d7cbb7b77f0b1bf1656018aedになります。

コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed"></code>
結果

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

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

gistのリポジトリ内にある指定したファイルを表示します。
今回はsample.phpを表示してみます。

コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-file="sample.php"></code>
結果

readmeが表示されておらず、sample.phpのみが表示されていることが確認できました。

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

コードの一番目にキャプションを表示します。
デフォルトでは非表示です。
表示したい文字列を渡すことで表示できます。

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

キャプションの表示と非表示を比べてみます。
表示するファイルはsample.phpです。

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

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

data-gist-hide-footer: フッターを非表示にする

フッターの表示/非表示を設定します。
hosted with ❤ by GitHubと表示されている部分ですね。

デフォルトで表示です。
非表示にしたい時にデータ属性にtrueを設定します。

表示するファイルはsample.phpです。

コード
<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-hide-footer="true"></code>
フッターを表示(デフォルト)
フッターを非表示

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

終わりに

今回は、gist-embedのオプションで以下の内容を調べてみました。

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

今まではファイル単位での表示しか使ったことがないのですが、キャプションが表示できると見栄えがいい感じがします。

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

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

タイトルとURLをコピーしました