GitHub Gistで指定行のみ表示や行をハイライトする方法

先日、ブログにソースコードのサンプルを貼るのに「GitHub Gist」を使うと便利だよ！という記事を書かせてもらいました。

こちらの記事です

WordPressでソースコードを表示するには「Gist」一択！プラグインでの埋め込みはもう古い！

2017年11月3日

今回はそのGistを使って「指定行だけ表示」したり、「選択行をハイライト」する方法をご紹介したいと思います。

スポンサードリンク

まずは準備

実は、指定行だけを表示したり、選択行をハイライトする方法は公式には提供されていません。

これらを実現するためには、サードパーティーが提供している「gist-embed.js」というライブラリを導入する必要があります。

難しそうに感じるかもしれませんが、ご紹介する手順通りに進めていただければ、そんなことはありませんのでご安心ください！

gist-embed.jsのダウンロードとインストール

ダウンロード

まずは、ライブラリをダウンロードします。
GitHubで公開されていますので、以下からダウンロードできます。

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

GitHubのページの「Code」という緑色のボタンから「Download ZIP」を押すとダウンロードします。

いくつかファイルがあると思いますが、今回使用するのは「gist-embed.min.js」というファイルになります。

インストール

続いて、ライブラリのインストールです。

インストールと言っても先ほどダウンロードした「gist-embed.min.js」をサーバーにアップロードするだけです。

今回はサイトルートに設置する前提で進めます。「wp-content」が置いてある場所ですね。
レンタルサーバーで異なりますが、僕が使っているエックスサーバーだと、「public_html」とかです。

今度はライブラリを読み込ませるために、header.phpの</head>の直前に以下のコードを追加します。

<script src="/gist-embed.min.js"></script>

これでインストールも完了！

gist-embed.jsの使い方

では実際に使って見ましょう。

まずは通常のGist Embedを使った場合です。 

生成した埋め込み用のタグがこちら↓

<script src="https://gist.github.com/lifoolgh/8b1b767e086e3fefb8bf3b9e00f5db80.js"></script>

実際に表示させるとこうなります↓

Gistで指定行のみ表示する方法

では指定行のみ表示させてみましょう。

このようにタグを書きます。

「data-gist-id=」のあとにgist-id（通常のタグのユーザーID/以降の文字列）を指定します。
「data-gist-line=」では表示する行数を指定。

<code data-gist-id="8b1b767e086e3fefb8bf3b9e00f5db80" data-gist-line="5-8"></code>

このタグを表示させるとこうなります。

Gistで行をハイライトする方法

今度は行をハイライトする方法です。

タグはこちらです。

「data-gist-highlight-line=」でハイライトする行を指定します。

<code data-gist-id="8b1b767e086e3fefb8bf3b9e00f5db80" data-gist-highlight-line="6-7"></code>

もちろん指定行だけ表示してハイライトも可能

もちろん、同時に使うことも可能です！

<code data-gist-id="8b1b767e086e3fefb8bf3b9e00f5db80" data-gist-line="5-8" data-gist-highlight-line="6-7"></code>

まとめ

いかがでしたでしょうか？

今回ご紹介したライブラリ「gist-embed.js」を使えば、プラグインでしか出来ないことは、ほぼ無くなるのではないでしょうか？

設定も難しくないので、ぜひ使ってみてくださいね！

最後まで読んでいただきありがとうございました。
この記事が少しでもお役に立ちましたらシェアしてもらえると嬉しいです。