Cocoon のシンタックスハイライトのスマホでの改行位置を変えたい

2020年3月26日2020年3月28日

Cocoon のデフォルトでは、シンタックスハイライトを有効にしている状態で iPhone や iPad でソースコード見たときに、右端で改行してくれている。好みの問題だが私はこれだと見づらい。なので右端で改行しないでスクロールするようにしたい。

もしかしたら、Google 先生から横幅が表示サイズを超えてますという警告をもらうかもしれないが、指摘されるまではこのままやってみる。

標準のhighlight.js の場合

.entry-content pre code span {
    word-wrap: normal;
    white-space: pre;
    overflow-x: auto;
}
.entry-content pre code {
    word-wrap: normal;
    white-space: pre;
    overflow-x: auto;
}

code と span の両方に設定を書く必要があった。片方しか設定せずに色々試していたので、ソースコードが壊れたように表示されて悩んだ。

Prism.js の場合

シンタックスハイライターを Prism.js に変えてからも悩んだ。こちらも <span> の word-wrap が break-word になっているのが原因っぽい。

以下を追加したら期待通りの動作になった。

pre[class*="language-"] code span {
    word-wrap: normal;
}