ブログを書く際に記事にソースコードを載せるのですが、これまではシンタックスハイライトのプラグインを使っていたのですが、中々しっくり来るプラグインがなく。

シンタックスハイライトって読み込むの時間かかるし、ちょっと長くなると見づらかったりコピペもしにくいんですよね。

それでずっと何かいい方法はないかなと探してたのですが、仕事でもちょくちょく使ってたgistをブログ用にも利用して載せてみた所すごいしっくりきました！

gistの利点

githubとは異なり、ファイル単位で扱えるので手軽に追加出来ますし。gitなんでメンテもしやすい。

もっと早く利用しておけば良かった…。

まだブログでの利用は始めたばかりですがメリットも多々ありそうです。

• ブログに貼り付けやすい
• ブログ上でコードが見やすい
• 記事の読み込み速度も多少良くなった
• 記事に載せているソースコードもメンテしやすくなった

ブログに貼り付けやすい

これもすごい変わりそうです。

いままでは実際にサンプルを実装して、動作確認をしてからコピペして記事に貼り付けてたのですが、これからはローカルで実装して動作検証、確認できたらpushして完了。gistのIDをそのまま記事に設定すれば載せれます。

gistの方でもブログ貼り付け用のHTMLが発行されるのですが、WordPressではそのまま利用出来ないようなんで、プラグインを使うといいみたいです。

Embed GitHub Gist

あとは記事の中で下記の様なタグを入れるだけで完了でした。

[gist id=gistのIDを設定する]

ブログ上でコードが見やすい

下記は別記事用に書いたサンプルなんですが、行間がシンタックスハイライトのプラグインよりも見やすいですし、ファイル種別によって色分けもされていい感じで。

記事の読み込み速度も多少良くなった

これは正確に測ったわけではないんですが…、気のせいかシンタックスハイライトのプラグインよりも体感で読み込み速度が早くなった感じがします。

記事に乗せているソースコードもメンテしやくなった

なんだかんだで、一番のメリットはこれなのかなと思いました。

ブログの載せる以上は間違いは書かないように慎重に書いてるのですが、やはり間違いやもっといい書き方を思いついたりもしますし、そんな時に開発環境で再度確認して、記事を書き直す…これは結構面倒でした。

gistなら検証してプッシュするだけで記事側も変更せずに修正出来ます。

便利です。

まとめ

WordPressで技術ブログを書いていたらgist使うと楽になりますね。

過去の記事とかも、ちょこちょことgistに移行していこうかなと考えてます。

関係ないですけど、qiitaとブログの使い分けもどうするか悩み中です。

自分の中ではqiitaは、使い回し可能な作業の記録とかで、ブログでは色々検証とかサンプルも載せていきたいなと考えてます。