画像やリンクが無効になっている可能性もあるのでご了承下さい。
当ブログでは 2018/10/09 現在、コードハイライター (Syntax Highlighter) として Prism.js を手軽に導入出来るプラグインをインストールして使用している。
ここ最近、この Prism.js の表示も個人的な飽きが来ていたのでテーマを変更した物のそれでもなんかしっくりこない。
何がしっくりこないのかなーと観察したら他のハイライターと比べてフォントサイズが本文と同じままであり大きすぎると感じた事に違和感があったようで。
そんなもんで Prism For WP の CSS を弄って個人的にしっくり来るように調整をしてみた。
これは WordPress に適用しているテーマの子テーマにある style.css に書いた。
code[class*="language-"],pre[class*="language-"]{
font-size: 90%;
background-size: 3em 2.7em !important;
margin: 0 0 !important;
} 2 行目でフォントサイズを調整。ピクセル指定よりパーセント指定の方が今後なにかブログ側で変更した際に融通が効いて良いかなと。
フォントサイズ調整に伴い、使用している Prism.js のテーマ背景にある 1 行毎のストライプの間隔が文字サイズとズレていたのでそこも調整。こちらは !important を付けてオーバーライドが必要だった。
ついでに上下方向のマージン指定があった物を 0 にして少し詰めるようにした。
これで個人的にしっくり来る感じには出来た。
Prism.js によるコードハイライト方法は非常に細かな事が出来る代わりに pre class にあれこれ指定してあげないといけない煩わしさがある。うまいこと AddQuicktag なんかのプラグインを活用して必要 class を予め登録しておくことで対処は可能だろう。
以下 2018/10/10 追記
フォントサイズを弄くると行を強調するプラグインを使ったとき、ハイライトされる行もズレてしまうと分かった。
その修正には JavaScript に直接手を入れることで対応出来た。
修正するファイルは wp-content/plugins/ank-prism-for-wp/out/prism-js.min.js となり、管理画面でテーマ変更やプラグインの有効/無効の作業を行う度に生成される物なので、その度に修正が必要になる。
この prism-js.min.js をテキストエディタで開いて s.style.top=(c-l-1)*o+"px" をまるっと検索する。1 箇所しかないので、発見次第 s.style.top=(c-l-1)*o*0.9+"px" と言う具合に *0.9 を入れ込んで上げるだけ。
これはフォントサイズを 90% にしているので、ハイライト行の高さ計算でも 90% にして上げると言う事で。
これでうまいこと行ハイライトというか行の強調も問題なく出来るようになった。
コメント