highlight.js を使う

前々からワードプレス上でソースコードを貼り付けるのをどうしようか悩んでいたのだが、重いプラグインに見切りをつけ JavaScript である highlight.js を導入した。こんな感じなる。

cd ..

html や css でちょっと使う程度なので、こんなもので十分。問題は、余白が微妙にグレイになっていること。記事背景を濃くすれば、この部分は透過して目立たないが、背景ピュアホワイト #fff だと、ちょっとやぼったいグレイが出現する。完全に透過してくれてないわけですね。
ちょっとしたことだが、気になる～ (;´Д｀)

→この問題は、pre 要素に色の属性を与えることで解決。例えば style.css に以下のコードを加える。

pre {
  background-color: #fff;
}

lang = “css” と指定しているのに、なんで、こういう配色になるかは不明だが…。