GitHub/Gistのソースをブログに範囲指定して表示する方法
以前、GitHub/Gistを使ってソースコードをブログに貼りつける方法について書きましたが、範囲指定して載せたいと思っていました。これができると部分部分を載せながらソースコードの解説ができるからです。で、teratailというQAサイト上で質問したところ、gist-embedというライブラリを使うと可能とのことでした。
[ad#top-1]
まずはgist-embedをダウンロード
以下のGitHubページからダウンロードできます。
https://github.com/blairvanderhoof/gist-embed
この中からgist-embed.min.jsを自分のサーバーにアップしておきましょう。
gist-embedの利用
ソースコードは以下の通りです。この例でいくと11行目から15行目を表示させることになります。
解説
それでは解説します。
まず、サーバーに置いたgist-embed.min.jsを読み込みます。以下の通り10行目のところになります。ちなみに、この表示はgist-embedを使用して上の全体のソースコードから10行目のみをにき出したものです。
次に、コードの表示ですが以下のように<code>タグを用います。
data-gist-id=”6078…8ac9″のところはGistのIDで、data-gist-line=”13-15″で行範囲を指定します。ここでは13行目から15行目を表しています。
WordPressの場合はどうするか
WordPressの場合、10行目のようにどうやってjsファイルを読み込みかと言うと、常に使うのであればheader.phpに埋め込むか、あるいはページごとに書いてしまうかのどちらかでしょう。
ちなみに、このページはページ内に埋め込んでいます。これが正しいかどうかは置いておいて、ページ内に埋め込んでも可能だと言うことだけお伝えできればと。
[ad#ad-1]
スポンサーリンク