はてなダイアリースーパーpre記法でスクロールバーを表示する

さくらばさんが以下のように呟かれていました。

このブログも特に設定しておらず、ちょっとやり方を調べてみたらできたので、メモ書きとして。

はてなダイアリーの設定からcssをつかすることが出来るので、そちらから編集します。

管理 > デザイン編集 > 詳細 > ヘッダ／フッタ／スタイルシートの編集 > スタイルシート

こんな感じ。

pre {
  overflow: auto;
  padding-bottom: 10px;
}

padding-bottomを指定しているのはMac+Chromeだとスクロールバーが文字の上に表示されてしまうからです。

pre {
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

どちらかお好みで。

追記：なお、はてなブログでは有功にならないらしいです・・・・・