はてなブログのコードブロックが改行されるときの設定

今使ってるはてなブログのテーマはコードブロックが改行されるのでインデントとかわかりにくい。改行されずにスクロールバーで横スクロールしたい。ちなみに解決前までこんな感じだった↑

対処方法

調べたところこちらの記事が見つかりました。CSSを1行ずつ解説されていて大変わかりやすかったです。

けど、僕のブログだと変わらず改行されてしまった。もう少し頑張って調べたらこちらの記事が見つかりました。デザインCSSの設定で変わらない場合は詳細設定で変えられるらしい。

設定を開いて

詳細設定タブ開いて

検索エンジン最適化/headに要素を追加の欄に下記CSSを追加。

<style>
  pre{
    white-space: pre;
  }

  .entry-content pre{
    word-wrap: normal;
  }
</style>

するとこんな感じでめでたくスクロールできるようになった。

ついでにデザインCSSで黒い背景に設定した。色付きの文字は黒い背景の方が見やすい気がする。

.entry-content pre.code {
    background-color: #3F3F3F;
    color: #DCDCDC;
}

ということでこんな感じになった。

  <!--省略-->
  <!-- ===========  Transmission ============ -->
  <xacro:wheel_trans prefix="right" interface="hardware_interface/VelocityJointInterface" />
  <xacro:wheel_trans prefix="left" interface="hardware_interface/VelocityJointInterface" />
</robot>