SyntaxHighlighterのデザインをカスタマイズする

SyntaxHighlighterをテンプレートのまま使ってもいいのですが少々見辛い箇所があるのでデザインをカスタマイズします。

  SyntaxHighlighter.all();
  </script>
  <style type='text/css'>
    .syntaxhighlighter {
      border: 1px solid #aaa;                /* 外枠を追加 */
      border-radius: 3px;
      overflow-y: hidden !important;         /* 縦スクロールバーを消す */
    }
    .syntaxhighlighter .line.alt2 {
      background-color: #EBE8E8 !important;  /* 奇数の背景を変更 */
    }
    td.gutter .line.alt2 {
      background-color: #EBE8E8 !important;
    }
  </style>

.syntaxhighlighterは外観のcssです。
ここに3pxの外枠を追加、長い行を書かないので縦スクロールバーを消しています。

.syntaxhighlighter .line.alt2は奇数行のcssです。
コードが見易い様に背景色を変更しています。

td.gutter .line.alt2は奇数行の行番号のcssです。
ここも上と同じ背景色に変更しています。

紛らわしいですが偶数色は”.line.alt1”です。