Syntax Highlighter 【スタイル】

バージョンは3.0.83を元に書いています。

Chrome用の修正

現状ではChromeで行番号の表示が狂ってしまう症状があります。

コードの表示は正常ですが、行番号だけ折り返して表示されています。回避策として、以下の定義が挙げられていました。

.syntaxhighlighter table td.gutter .line
{
 padding: 0 5px !important;
}

その他

後はこのブログでの設定を書いておきます。その都度書き足したりして、意味のない定義をしていたり、重複してたりするかも知れませんが、クラス名程度でも参考にどうぞ。
※テーマはDefaultを使用しています。

.syntaxhighlighter 
{
 overflow-y: hidden !important;
 border: 1px solid #ccc !important;
}

.syntaxhighlighter div,
.syntaxhighlighter span,
.syntaxhighlighter code,
.syntaxhighlighter textarea
{
 font-size:12px !important;
 font-family: "Consolas", "monospace" !important;
}

フォントを等幅フォントで選んでいたのですが、何故か等幅にならないと悩んでしまいました。 boldで表示された時に幅が変化する等幅フォントと変化しない等幅フォントがあるんですね。

.syntaxhighlighter textarea
{
 font-size: 13px !important;
 line-height: 13px !important;
 margin-top: -1px !important;
}

.syntaxhighlighter .line.alt1
{
 border-bottom-width: 1px !important;
 border-bottom-style: solid !important;
 border-bottom-color: rgb(240,240,240) !important;
 background-color: white !important;
}

.syntaxhighlighter .line.alt2
{
 border-bottom-width: 1px !important;
 border-bottom-style: solid !important;
 border-bottom-color: rgb(240,240,240) !important;
 background-color: white !important;
}

.syntaxhighlighter .gutter
{
 color: rgb(175, 175, 175) !important;
}

.syntaxhighlighter .gutter .line
{
 border-right: 3px solid rgb(240,240,240) !important;
}

.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2
{
 background-color: rgb(255, 255, 223) !important;
}

.syntaxhighlighter .gutter .line.highlighted
{
 background-color: rgb(255, 255, 223) !important;
 color: black !important;
}

.syntaxhighlighter table caption
{
 color: rgb(45,103,22) !important;
 background-color: rgb(173,201,248) !important;
 text-align: left !important;
 padding: 2px !important;
 line-height: 1em !important;
}

.syntaxhighlighter a:hover
{
 background-color: rgb(204, 204, 255) !important;
}

.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea
{
 line-height: 1em !important;
}

おまけ

Syntax Highlighterのコード部分をダブルクリックすると、テキストエリアになってコードのコピーが簡単に出来ます。ただし、その際半角スペースが でコピーされるので、問題が少しあります。