WordPress の本文に Gist を埋め込んで見た目をかっちょよくする

ひとつ前の記事でいろいろやったんですが、まるっと変更して、

• Markdown のリアルタイムプレビューは Omni​Markup​Previewer で。
• コードをかっちょよくするのは Gist 埋め込み。
• jQuery で class 付与するのもなし。
• Gist 埋め込みの見た目は CSS でなんとかする。

としました。

Gist 埋め込み

埋め込みしたい Gist のページを開き、右側メニューの Embed URL のところをコピペすると埋め込めます。埋め込みタグ中の URL は、Gist の URL + 拡張子っぽいです。

Gist 埋め込みの CSS を調整

通常は白背景のこちらの表示ですが、

google-code-prettify の sunburst.css の衝撃が忘れられず、似たような見た目になるようがんばりました。

!important 祭のコードはこちら。

背景色を塗り替えたのと、濃い背景にしたのでテキストのハイライト色をそれぞれ明るめに変更。横スクロールがかっちょいいやつは、サイドバーのアーカイブでも使っている perfect-scrollbar です。

長いログのとき、だーーーっと長く表示されてしまうので、.gist .line-numbers に max-height を設定してスクロールするように変更しました。

ひとつだけ !important がついていない table-layout: auto; は、今使っているテーマの親テーマ Twenty Fourteen の CSS で table-layout: fixed; という記述があったため表示がおかしかった対策です。

まったく脈絡もなく、キーボードショートカット置いときますね。

Alt + F4