Google Code Prettifyの横幅が固定でレスポンシブにならなかったのでCSSを修正

調べても情報が出てこなかったんですけどもしかして自分だけかな？Code Prettifyがマイナーなのかも。ちょっと古いし。

Code PrettifyはCDNのリンクを貼って、preにprettyprintクラス付けるだけなので簡単に使えます。linenumsクラスをつけると行数の表示も可能。動作も軽いみたい。だたHTML特殊文字のエスケープは必要ですね。

<pre class="prettyprint">...</pre>

横幅が固定になる原因は、preの中に生成される色分けされたspanもしくはli（行数の表示をオンにしてる場合）のHTMLタグが折り返しになっていからでした。

CSSを追加して修正

pre.prettyprint {
  word-break: break-all;
}

preのword-break: break-all;でテキストを1文字単位で折り返しにするだけで横幅が縮んでくれるようになりました。もしこれでもならない場合はbreak-allの後に!importantをつけるといいかも。

上の2つのコード表示にGoogle Code Prettifyを使ってるので確かめてみてください。テーマはsons-of-obsidian。