WordPressのサイトにソースコードを埋め込もうとしたことが何度かありますが、どうもインデントが思うように入らなかったり、「>」のようにエンコードされた文字が表示されてしまったりとうまくいった試しがありません。

今回はWordpressのエディタにソースコードを直接貼り付けるのではなく、GitHub Gistというサービスを利用して外部にソースコードを置く方法をとってみました。

GitHub Gistを作成する

ソースコードのバージョン管理には、普段はBitBucketを使っていました。
BitBucketはUIもクールだし、無料枠で十分使えて非常に助かっています。

GitHubは昔から英語だし、プライベートリポジトリが有料だったのでインターン時代しか使っていませんでした。
設定等は全てCTOにお任せしていたので、使うタイミングといえばgit pushかgit pullのみ。
GitHub Gistというサービス?も名前を聞いたことがある程度でした。

要は、「Gitのリポジトリを作るほどでもないくらいの、ちょっとしたソースコードをGitHubで管理したい」というニーズを満たしてくれるもののようです。
早速作ってみました。

(1)メニューから「New gist」を選ぶ

(2)名前や拡張子を指定してGistを作成する

Rubyが好きなので一つ関数を定義してみました。
単に引数を2倍するだけの、名前と全く対応していない関数です。

余談ですが、Rubyの「最後に評価された値が関数の戻り値となる」という言語仕様は結構変わっていて好きです。
returnを書かなくても戻り値が返るってなんか不思議ですね。
もちろん、関数の途中で関数を抜けたいときはreturnを使います。

さて、本題のGist作成はたったこれだけでした。
「Create public gist」をクリックすると、このソースコードが世界に公開されます。

公開されたGistのURLはこんな感じになりました。
https://gist.github.com/tetsushi-ito/17f3ef582cafe2b3b50d4dbc72a4a8e9

GitHub GistをWordpressのサイトに埋め込む

Gistを作成したあとにそのGistのページを見ると、以下の画像の赤枠で示したところにscriptタグが表示されていました。
これをWordpressに貼り付ければ完了しそうな予感です。

WordPressのエディタを「ビジュアルモード」に変更して、scriptタグを貼り付けます。

無事貼り付けることができました!↓↓

ソースコードをこれだけ簡単にウェブサイトに掲載できると、より情報発信もやりやすくなりますね。とてもありがたいです。