Naoki Otsu

highlight.jsのソースコードを改行させないCSS

2018-10-16

このブログは、hightlight.jsを使ってソースコードのハイライト表示をしているけど、デフォルトだと横幅を超えると改行されるようになっていて、これを改行させずにスクロールして表示するようにしたいなぁと思ってた。そんな時のCSS。

pre {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

これでスクロールしてソースコード表示出来るように。
ただiOSだとスクロールに引っ掛かりがあるので、さらに -webkit-overflow-scrolling: touch; を入れてスムーズにスクロールするようにした。