非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

GitHub/Gistのソースをブログに範囲指定して表示する方法

   

以前、GitHub/Gistを使ってソースコードをブログに貼りつける方法について書きましたが、範囲指定して載せたいと思っていました。これができると部分部分を載せながらソースコードの解説ができるからです。で、teratailというQAサイト上で質問したところ、gist-embedというライブラリを使うと可能とのことでした。

1

[ad#top-1]

まずはgist-embedをダウンロード

以下のGitHubページからダウンロードできます。

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

この中からgist-embed.min.jsを自分のサーバーにアップしておきましょう。

2

 

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に埋め込むか、あるいはページごとに書いてしまうかのどちらかでしょう。

ちなみに、このページはページ内に埋め込んでいます。これが正しいかどうかは置いておいて、ページ内に埋め込んでも可能だと言うことだけお伝えできればと。

3

 

[ad#ad-1]

スポンサーリンク

 - GitHub