うらなか書房のあやしいグッズあり〼

うらなか書房と申します。AmazonYahooClubTTTrinitySUZURIなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめのホラー映画や漫画、本、その他少し物騒なものや奇妙なものの紹介をしています(たまにお役立ち情報や雑記も書きます)。

たまに毒吐くちゃん

カテゴリー「Web関連」の人気記事TOP3

GitHub Gistを使うとブログにコードを簡単、綺麗に表示できる【プラグインやライブラリ不要】

time 更新日:  time 公開日:2016/11/11

有名なサービスなので既にご存知の方も多いと思いますが、先日「GitHub Gist」を使ってブログにコードを載せてみた所、思いのほか簡単かつ綺麗に表示することができたのでご紹介してみます。

備忘録も兼ねて、実際に使用してみての注意点や、CSSで見た目を少しカスタマイズする方法も載せておきます。

スポンサーリンク

以前は記事内に直接コードを書いていた

「GitHub Gist」を使うまでは、ブログでコードを紹介する際は記事内に直接コードを書いていました。

こんな感じです

/*****************************************
Jetpack関連投稿の画像とタイトルの周りに影をつける
******************************************/
.jp-relatedposts-post-img{
box-shadow: 0 -2px 5px #999;
}
.jp-relatedposts-post-title{
box-shadow: 0 2px 5px #999;
padding:5px;
}

ちょっとしたコードならこれでもいいかなと思っていたのですが、

  1. 行数が表示されない
  2. シンタックスハイライト(色分け)がされない
  3. 「<」などの特殊文字がたくさん出てくるコードだと書き直しが大変
  4. 長いコードだと場所を取る

という点がちょっと不満でした。WordPresssの場合プラグインを使えばほとんど解決する問題なのですが、重くなるという評判があったので導入は見送りました。

「GitHub Gist」にコードを登録

そんな折、どこかで「GitHub Gist」を使うとブログにコードを表示できるという情報を目にしまして、試しに使ってみることに。

GitHub」にユーザー登録をすると「Gist」にコードを登録できるようになります。その登録もとても簡単で、

Gist

New gist」というボタンを押すと上の画面が現れるので、コードの説明やファイル名を入力し、コードを貼り付けて(特殊文字を考慮せずそのまま貼り付けてOK)、「Create secret gist」か「Create public gist」のどちらかのボタンを押すだけです。

secret」といっても、検索に引っかからないだけで、ブログからそのコードのページにリンクを貼ったりすれば誰でも見ることができます(参考:公式ヘルプページ)。
ブログにコードを貼る分にはどちらでも構わないようです。

ブログへのコードの貼り付け方

gist-embed

コードを登録すると、そのコードのページに「Embed」というパーツが現れます。そこに書いてあるスクリプトコードを、ブログの記事作成画面(ビジュアルではなくテキストエディタ)にコピペするだけで、綺麗に整形されたコードが表示されます。

「GitHub Gist Embed」の表示

行数が自動的に表示され、シンタックスハイライト(色分け)も自動でやってくれます。
上述しましたがコードは特殊文字を考慮せずそのまま貼り付けるだけなので、この時点で既に上の問題点、

  1. 行数が表示されない
  2. シンタックスハイライトがされない
  3. 「<」などの特殊文字がたくさん出てくるコードだと書き直しが大変

1~3までは解決されています。

CSSで「GitHub Gist Embed」の見た目をカスタマイズ

実は上の表示はCSSで見た目を少しカスタマイズしています。カスタマイズしていないともうちょっとサッパリした見た目です。

「GitHub Gist Embed」のオリジナルの見た目
gist-original

以下にCSSを載せておきます。

最大の高さを指定

長いコードの場合でも、表示される最大の高さを400pxにしています。「400」の数字を変えることにより、高さの調節ができます。

長いコードの表示例

400pxより下はスクロールすることにより見ることができます。
また、「view raw」をクリックすると、コードだけが書かれたページが表示されます。全体をコピーする場合はこちらを表示させると便利です。

このコードにより問題点の4、

  • 長いコードだと場所を取る

が解決されます。

コードの奇数行だけに色をつける

この方が見やすいかと思いまして、コードの奇数行だけに色をつけています。「#f5fffa」の部分をお好きなカラーコードに差し替えればその色になります。

コードを太字にする

太字の方が見やすいかと思いましてコードを太字にしています。

メタ部分の背景色

by GitHub」などが書いてある欄の背景色を変更しています。「#17b987」の部分をお好きなカラーコードに差し替えればその色になります。

コードの周りの隙間を狭める

「GitHub Gist Embed」をそのまま貼り付けると、お使いのブログによってはコードの周りに余計な隙間ができるかもしれません。その場合は試しに上記コードをCSSに追加してみてください。

「GitHub Gist」の注意点

ファイル名をピリオド+拡張子で終わらせないとシンタックスハイライトがされない

Gistのファイル名に特にこれといった決まりはないようで、なんなら無題でも作成できるのですが、ファイル名をピリオド+拡張子(「.html」や「.css」、「.php」など)で終わらせないとシンタックスハイライトがされませんでした。
これさえ守れば、ピリオドの前は日本語でもシンタックスハイライトがされました。

その他にもシンタックスハイライトがされない場合がある

例えば、

<?php
?>

の間に追加するコードで、シンタックスハイライトがされないものがありました。不完全なコードのような扱いになったのでしょうか……?

コードの一部を取り出すことはできない

コードの何行目~何行目を取り出す、ということは公式ではできないようです。
どうしてもやりたい場合は、今の所以下のJavaScriptライブラリを使うしかないようです。

gist-embed.js

複数ファイルを1ページにまとめた時に、その中の単一のファイルを貼り付けることができない

コードをGistに登録する時や編集する画面に、「Add file」というボタンがあります。
このページのGistについてのCSSなども、本当はその「Add file」という機能を使って、セットとして1ページにまとめておいた方が管理がしやすいのですが、「New gist」で別物のファイルとして登録しています。

なぜかといえば、「Add file」でコードをまとめておくと、Embedを貼り付けた時に、そのページのコードがまとめて表示されてしまうからです。ひとつひとつのコードについて、これはこういうコードですという説明を書きたい時に不便なのです。

数年前はスクリプトコードの後に「?file=ファイル名」を足すとコードのひとつを書き出すということができたようなのですが、最近ではできなくなった……?

How do I embed a single file from a GitHub gist with the new gist interface?

私もやってみたのですができませんでした。正確には、最初に登録したコードは上記により単一で表示できたのですが、「Add file」で登録したものを単一で表示することができませんでした。

ちなみに、これも「gist-embed.js」を使用するとできるようになるのだとか。

AMPのページでは表示されない

先日、プラグインを使って「AMP」というモバイル用のこざっぱりしたページを作成したのですが、AMPのページではGistのEmbedは表示されませんでした。
AMPは速度を重視するのでJavaScriptを使えないのだとか。

コードのことを調べたりする場合はパソコンを使う方が多そうなので、これに関しては私はまァいいかという気持ちです。

要望

上述した「コードの一部を取り出す」「単一のファイルを書き出す」などにももちろん対応してほしいのですが、その他に「背景が黒」のEmbedも用意してくれると尚素晴らしいのになァと思います。
CSSで頑張ればできるのですが、文字色もいちいち黒背景用に変更しなくてはいけないので正直面倒くさい……。

あとがき

GitHub」=プロのエンジニア御用達サービス、というイメージがあったのでなんだか近寄りがたかったのですが、「Gist」を使用してみた所とても使いやすく便利でした。

ブログにちょこっとコードを載せることがある方は使ってみてはいかがでしょうか。おすすめです。

スポンサーリンク


follow us in feedly  友だち追加数
 

 

ブログの更新をメールでお知らせします!

たまに毒吐くちゃん

この記事をシェアする

たまに毒吐くちゃん

関連する記事

出展記録

AmazonでTシャツや電子書籍(短編小説集)を販売しています

Amazon詳細ページへ Amazon詳細ページへ

Tshirt TrinityでTシャツやバッグを販売しています

TSHIRTS TRINITY

ClubTでTシャツやバッグを販売しています

プロフィール

うらなか書房

うらなか書房

あやしい絵を描いて、それをTシャツグッズにしています。


ホラー映画カルト映画、その他少し物騒なもの奇妙なものを見たり読んだりすることが好きです。

ちょっと変人かもしれませんが、危ない感じではなくただのヘッポコなので、お気軽にSNSでのフォローコメントをお願いします!

詳細なプロフィール

ブログをメールで購読

メールアドレスを記入して「購読」ボタンをクリックすると、このブログの更新情報をメールで受信できます。

マスコットキャラ

たまに毒吐くちゃん

当ブログのマスコットキャラ「たまに毒吐くちゃん」。所々に出没します。
TSHIRTS TRINITYClubTSUZURIでTシャツ・グッズ販売中です!

うらなか書房のおすすめ映画

うらなか書房のおすすめ映画
うらなか書房がおすすめのホラー映画カルト映画B級映画などをAmazonで紹介しています。


スポンサーリンク

Twitter