WordPressで、HTMLやCSS、phpなどのソースコードをきれいに表示するシンタックスハイライト機能を導入できるプラグインがあります。
このシンタックスハイライト系のプラグインは色々あるのですが、このブログでは「Highlighting Code Block」を使用しています。
ただ、この「Highlighting Code Block」に限らず、シンタックスハイライト系のプラグイン全般に言えることなんですが、行の文字数が多くなった場合に横スクロールするようになっていることがあります。
中途半端な部分で折り返されて可読性が落ちるよりはいいのですが、PCで長いソースコードを見る際、ちょっと不便だなというのは昔から感じていました。
ですので、今回は「Highlighting Code Block」の横スクロールさせなくする方法について解説したいと思います。
横スクロールしないようにするには？
正直なところを言うと、それほど難しいことではありません…
「Highlighting Code Block」のCSSを見ると以下のようになっています。
.hcb_wrap.hcb_wrap>pre>code {
word-wrap:normal;
background:var(--hcb--bgc);
border:none;
color:var(--hcb--c);
-webkit-hyphens:none;
hyphens:none;
tab-size:4;
text-align:left;
text-shadow:var(--hcb--tsh);
white-space:pre;
word-break:normal;
word-spacing:normal
}white-space:pre;となっています。このwhite-spaceのプロパティの値がpreだとテキストは折り返されなくなるため、横スクロールが発生するという状態になります。
ですので、このwhite-spaceのプロパティ値をpre-wrapに変更してやります。
white-space:pre-wrap;こうすることで、要素内でソースコードが折り返されるようになるので、横スクロールが発生しないようになります。
ちなみにこのブログでは、tab-size:4;からtab-size:2;へ変更しています。
ここは完全に好みなので、お好きなように変更してみてください。
スマホでは横スクロールありの方がいいかも…
これで無事解決と思ったのですが、スマホで見ると若干この折り返しが鬱陶しい…と感じました。ですので、スマホ対策として以下のようにCSSを追記しています。
@media (width < 768px) {
.hcb_wrap > pre > code {
white-space: pre;
}
}メディアクエリを使って対応しただけですが、これだけでもスマホでの可読性が確保できたのではと思います。
今回の横スクロールに関しては、非常にニッチなニーズかなとは思ったのですが「これ…若干気になってたんだよね…」という方に刺されば幸いかなと…