引き続きsyntaxhighlighterのCSS調整まとめ

1. Mobileブラウザで表示崩れを補正
safariなどで行番号が消えてたりするのを改善します

.syntaxhighlighter {
  /*safariで行番号が消えるのを修正*/
  -webkit-text-size-adjust: 100%;
}

2. 縦スクロール表示無し
縦スクロールは邪魔と思ったので消します。

.syntaxhighlighter {
　/* 縦スクロール非表示 */
  overflow-y: hidden !important;
}

3. 表示枠線調整

.syntaxhighlighter table {
  /* 表示枠の線種　線色と線の太さ調整 */
  border:solid 1px #EEE !important;
}

4. IE用調整

/* 元々はこれ
 .syntaxhighlighter.ie {
  font-size: .9em !important;
  padding: 1px 0 1px 0 !important;
} を以下のように変更 */
.syntaxhighlighter.ie {
  /*IEフォントサイズ*/
  font-size: 1em !important;
  /*IE横スクロール対策*/
  padding: 0 0 1.4em !important;
}

5. はみ出し対策
横に長いCodeが枠外へ突き抜けるのを防止

.syntaxhighlighter .line.alt1 {
  word-break: break-all !important;
}
.syntaxhighlighter .line.alt2 {
  word-break: break-all !important;
}

6. 奇数行の背景色変更
行の見通しよくします

.syntaxhighlighter .line.alt2 {
  background-color: #F8F8F8 !important;
}
/*偶数行の背景色は以下*/
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}

7. タイトル枠の表示調整

.syntaxhighlighter table caption {
  color: white !important;
  background-color: #848484 !important;
  line-height: 0.50em !important;
  font-size: 12px !important;
  margin-left:2em;
}