ソースコードを埋め込むなら gist です。

先日、WordPress にソースコードを埋め込むために CodePen を使うようにしましたね。覚えていますか、みなさん。

HTML と CSS を組み合わせて、その結果を表示できるというスグレモノですが、単純にコードを埋め込むときには、ちょっと大げさになっちゃう。それと、PHP とか載せたいときにどうやるのか分からない。

<pre> を使っても良いんですけど、いまいち格好良くないので、他に何かないかと調べたら、GitHub に付属している gist というエディタを使えば良かったんですね。

CodePen のアカウントを作るときに GitHub のアカウントも作っていたので、特に何もせずにすぐ使えました（笑）

作成したソースコードを簡単に埋め込むことができます。

でも、見た目がパッとしないので、CSS でカスタマイズ。

カスタマイズ内容はこんな感じ。

• 行数の罫線を削除
• フッターを削除
• 奇数行に色付け
• フォントサイズを大きく
• 表の外側に余白を設ける

今後はこれで簡単にソースコードを紹介できますね。（主に自分の備忘録だけど）

こちらの記事にも適用してみました。