ソースコードを埋め込むぞ。

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

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

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

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

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

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

gist のオリジナルデザインです
gist オリジナルデザイン

gist のデザインをカスタマイズしました
gist デザインをカスタマイズ

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です