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

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

たまに毒吐くちゃん

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

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

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

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

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

sponsored link

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

「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を使えないのだとか。

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

フラグを立てられる(=Banされる)ことがある

ある日、「GitHub Gist」のページの上部に、

Your account has been flagged.Because of that, your profile is hidden from the public. If you believe this is a mistake, contact support to have your account status reviewed.

という文章が表示されているのを見つけました。
しかしブログに貼り付けたコードは普通に表示されていたし、コードの登録や編集などもできたので、まァいっか……としばらく放っておいていました。

その後別のブラウザでコードを貼っている記事をふと見てみた所、コードが表示されているはずの部分が空白になっていることに気付きました。
そこでようやく「これはもしかしてマズい事態なのでは……?」と考え、上に書いてある文言を調べてみた所、下記のページが見つかりました。

Your account has been flagged.って?どきどきしながらgithub.com/contactに英語でメールしてみた

まさか「フラグ=Ban」だとは……!

ということで、上の記事を参考にさせて頂きまして、慌ててサポートにメールを送りました。
すると数時間ほどでフラグ云々の文章が消えコードも無事表示されるようになりました。

「GitHub Gist」は大変便利ですが、このように突然Banされたり、サービスが終了する可能性もなくはないので、そういった点がリスクといえるかもしれません。

githubに"You are not a human."と言われたら

という記事では、サポートからの返信に「ホワイトリストに登録した」と書いてあったとのことで、それだと安心なのですが、私が受け取った返信にはただ単に「フラグ消しました」というようなことしか書いてなかったのでちょっと不安……。
コードを登録したり編集したりする用がなくても、たまにログインしてフラグが立っていないかチェックしようと思います。

要望

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

それとBanされると心臓に悪いので、もうBanしないでほしいです……(スパム対策でやむを得ない部分もあるのでしょうが……)。

あとがき

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

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

スポンサーリンク

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

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

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

TSHIRTS TRINITY

マスコットキャラ

たまに毒吐くちゃん

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

  

同じカテゴリーの記事

ブログを書く時に使える便利なWebサービス【リンクカード、画像軽量化など】

ブログを書く時に使える便利なWebサービス【リンクカード、画像軽量化など】

リンクカード「Embedly」、サムネイルにリンク「HeartRails Capture」、GIFアニメ作成「Animated GIF Maker」、画像を軽量化「TinyPNG」、SVG画像に変換「ZorroSVG」、漫画のコマを使用できる「マンガルー」を紹介しています。
Read More
【WordPress】「悪意あるログイン試行」への対策【.htaccess】

【WordPress】「悪意あるログイン試行」への対策【.htaccess】

WordPressの「悪意あるログイン試行」への数が急増したので、.htaccessを使い、ログインページなど特定のファイルへの海外からのアクセスを制限することにしました。その方法や問題点を書いています。
Read More
【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

画像が横にスクロールするjQuery製のスライドショーを紹介しています。自動で繰り返し、それぞれの画像にリンクを貼ることが可能です。WordPress用とそれ以外用のコードを載せています。
Read More
WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをプラグインでAMPに対応させ(有効化するだけなので簡単)、そのページに広告(アドセンスの表示・非表示の切り替えが可)、SNSシェアボタン、関連記事などを表示する方法と、AMP用のアナリティクスのコードの貼り方、AMPでエラーが出た時の対処法について書いています。
Read More
GitHub Gistを使うとブログにコードを簡単、綺麗に表示できる【プラグインやライブラリ不要】

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

GitHub GistのEmbedにより、プラグインやライブラリを使わずにブログに手軽にコードを貼り付ける方法や、注意点、表示のカスタマイズをするCSSなどを載せています。
Read More
CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)

CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)

CSSで作るスライドショー(幅と高さを固定、自動で繰り返す、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンクを貼ることができる)のコードを載せています。JavaScriptやjQueryは使いません。
Read More
【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

ワードプレスのプラグイン「Jetpack」の機能「関連投稿」を任意の場所に表示+表示する記事数を変更するカスタマイズを載せています。
Read More
WordPressの無料テーマ おすすめ6個【日本語、レスポンシブ、SEOに強い】

WordPressの無料テーマ おすすめ6個【日本語、レスポンシブ、SEOに強い】

ワードプレスの無料テーマ(テンプレート)で、おすすめの「個性的なテーマ」「初心者向けのテーマ」「カスタマイズに向いているテーマ」を2つずつ紹介しています。いずれも日本語、レスポンシブデザイン対応、SEOに強いといわれているテーマです。
Read More
2017年使用中のJetpackの機能【WordPressプラグイン】

2017年使用中のJetpackの機能【WordPressプラグイン】

WordPressの公式プラグイン詰め合わせ「Jetpack」の内で使用中の機能(Markdown、関連投稿、サイト統計情報、コンタクトフォーム、購読、プロテクト、パブリサイズ、サイトマップ、拡張配信、シングルサインオン)を紹介しています。
Read More
【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

WordPressのプラグイン「SNS Count Cache」が有効化できなかったのですが、PHPのバージョンを変更した所、無事有効化することができました。Twtterのシェア数の表示もできるようになりました。
Read More
【WordPress】Jetpack Markdownを使う時の注意点2つ

【WordPress】Jetpack Markdownを使う時の注意点2つ

Jetpack Markdown(ジェットパック マークダウン)を使おうとした所、困ったことが2つ起きました(見出しが出ない+段落が効かない)。その解決方法を書いています。
Read More
レトロな雰囲気のフリーフォント おすすめ4個【商用無料で漢字も使える】

レトロな雰囲気のフリーフォント おすすめ4個【商用無料で漢字も使える】

「国鉄方向幕書体」「機械彫刻用標準書体フォント」「うつくし明朝体」「しねきゃぷしょん」「コーポレート・ロゴ」というレトロな雰囲気のフリーフォントを紹介しています。見本のバナーもあります。
Read More
【2017年】おすすめのWordPressプラグイン【無料、定番多め24個】

【2017年】おすすめのWordPressプラグイン【無料、定番多め24個】

実際に使ってみて、記事が書きやすくなったり、管理がしやすくなったWordPress(ワードプレス)のプラグインを紹介しています。定番のものが多めです(スパム対策やバックアップ、リンク切れチェック、公式プラグイン「Jetpack」など)。
Read More