【Github】gist-embedとgistをSubmoduleで管理する方法

wordpressにコードを掲載する際にgithubで管理できないかと思い悩んでたのですが、一つの答えにたどり着いたのでその方法を掲載します。

結論から申し上げますとGithub Gistをリポジトリで管理する方法になります。現在はwordpressのHighlighting Code Blockを使ってコードの紹介をしておりましたが今後はGithub Gistを利用してご紹介ができたらと思っております。

wordpress以外でもjavascriptやHTMLの埋め込みができるブログ環境であれば利用可能なので一読いただけますと嬉しいです。

Github Gistの準備

Githubでリポジトリの作成

まずはGithubにログインをしてリポジトリを作るところから行います。

ログインしたら右上にプラスボダン(+)があるのでクリックします。その後プルダウンで画像のように表示がされるので「New repository」をクリックします。

画面遷移したら「Repository name」に好きな名前を入力します。

これでリポジトリが完成します。

Github Gistでファイルの作成

今後はGistでファイルを作成してきます。リポジトリを作成した時と同様にGithubにログインをし、右上のプラスボダン(+)をクリックします。

今度は「New gist」をクリックし、新しくgistを作成してきます。

画面が遷移したらコードを記述してきます。

コードを書き終えたら公開用のコードになるため、「Create public gist」のボタンを押し、保存してください。

SubModuleをGithub配下で管理

ローカルにリポジトリをCloneする

リポジトリとgistのファイルが完成したら、今度は手元のローカルでgitを操作してきます。

まずはターミナルを立ち上げ下記コマンドを走らせます。

[SSH Clone]の部分は先程作ったリポジトリの画面から確認することができます。

この時にHTTPSでのCloneを行った場合、ローカルからリモートのリポジトリに対してPush(変更を反映)ができないそうなので気をつけてください。

またSSHを行うにはGithub側でSSHキーを設定しておく必要がありますので留意してください。

ローカルリポジトリにgistを追加する

次にローカルにCloneしたリポジトリへ作ったgistを追加する方法を紹介してきます。下記コマンドでリポジトリの中で追加することができます。

[gist SSH Clone]はgistの画面から取得することができます。

[Clone via SSH] を選択するとSSH Cloneができます。コマンドを実行後は下記のようなディレクトリ構造になります。

親のリポジトリにSubmoduleをPush

testリポジトリに対してcommit,pushしていただくとGithub上は下記のように表示されます。

これでリポジトリでの管理ができるようになります。

運用にあたって注意していただきたい点が初回のcommit,pushは親(test)のリポジトリに対して実行すればよいのですが、gistの変更については　Submodule(sample_gist)に対してcommit,pushを先に行ってから親のリポジトリに実行を行ってください。

※先に親へcommit,pushを行うとSubmoduleに対して実行できず、30分ほどハマりました。。

ここまで実行したあとはgistに対してcommit,pushを実行してもらい、更新がされているか個別に確認していただけたら思います。

gist-embed.jsを利用したコード表示方法

ソース元のgitは下記にURLを記載しておきます。

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

gist-embed.jsの設置

gistの用意が完了したら次にgist-embed.jsに設置してきます。wordpressであればheader.phpのheaderタグ内に埋めていただければ動作します。

※他のブログでもheaderタグ内に埋めてください。

wordpressでのタグの埋め方に関しては下記から実施ができます。

wordpressログイン後に「外観」→「テーマエディター」→「テーマヘッダー (header.php)」を押して下記のheaderタグの中に埋めてください。

ファイルをダウンロードするように促しているブログ記事も見受けられましたが、特段Javascriptファイルをダウンロードして設置する必要はなく、外部のJavascriptファイルを参照するかたちで問題ありません。

1段目のタグはjQueryのファイルになるので既にサイトに読み込んでいる方は必要ありません。

実際にコードを表示させる方法

実際にコードを表示させる方法は下記のタグを埋めれば表示がされます。

【gist_id】はgistのURLから取得ができます。https://gist.github.com/(user_id)/【gist_id】

【file_name】は後述しますが、複数ファイルが存在するときに利用できるオプションです。

実際の表示結果は下記になります。

こんな感じでコードが表示されます。【file_name】の他にもgist-embedはオプションが存在するため、下記で紹介してきます。

gist-embed.jsのオプション

ファイルを指定し表示する方法

上記のコードで説明した通りgistでひとまとめに登録した複数のファイルから特定のファイルのみのコードを表示することができます。

特定行のみを表示する方法

codeタグ内にdata-gist-lineを記述すれば特定コードのみを表示することできます。

出力結果は下記になります。

一部の行をハイライトで見やすくする方法

codeタグ内にdata-gist-highlight-lineを記述すればコード内の強調したい部分を黄色で着色することができます。

出力結果は下記になります。

キャプションを表示する方法

codeタグ内にdata-gist-captionを記述すれば上部の枠に文言を入れることができます。

出力結果は下記になります。

フッターを非表示にする方法

codeタグ内にdata-gist-hide-footer="true"を記述すれば下部に記載されているヘッダーが非表示になります。※デフォルトはfalseになってます。

出力結果は下記になります。

まとめ

これでソースコードがgithubで管理でき、そのままブログに掲載することができます。またブログ書いている人はgithubで草が生えやすくなるので是非使ってみてください。

参照元

Github Gist を1個のレポジトリでまとめて管理する ( git submodule を利用 )

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