はてなブログでコードを折り返さずに表示する

はてなブログで技術系の記事を書くときにコードを貼り付けますが、デフォルトのままだと表示幅で折り返してしまい、読みにくくなります。

(追記) でもこれをやると,コード以外の通常の引用も折り返し無しになるため,とても見づらくなってしまいます...しまった.

しかし、他の方のブログでは折り返されずに表示されてて、そういう設定があるのかな、見つからないな、と思っていたら、これははてなブログのスタイルシートのカスタマイズの機能を使うということでした。↓

www.notitle-weblog.com

なるほど。

ダッシュボードのメニューからDesignを選択して、

Customizeを選択して、Stylesheetを開くとCSSを記述できる、と。

では折り返さないようにするCSSはどう書くのかというと、以下のとおり↓。

www.taneyats.com

これをCSS記述欄に追加するだけでOk。

pre, code {
    max-height    : 500px;
    overflow      : scroll;
    white-space   : pre !important;
    text-overflow : clip !important;
}