2012年9月27日

【JavaScript】SyntaxHighlighterの行番号表示がおかしい


最近ブログを書くのをサボっている私ですが、
コードを書いていない訳ではありません。
ブログに書くほどのネタがなかなか無いんです。

そんな中、最近SyntaxHighlighterの表示がChromeで見るとどうもおかしいので、
調べてみました。



最近までの僕のブログではこんなんになっておりました。


行番号の表示の部分がおかしいですよね?

まぁ、コードだけなら問題ないのですが、
それを何とか元に戻して、こう表示されたい。


このSSはもう戻した後の写真なのですが、
どうしたかと言いますと、GitHubをチェックしました。

alexgorbatchev / SyntaxHighlighter

したら、他の人も同様の事件が起きているようでした。

Issue #140 Many extra lines

さらにもう1つのIssueもOpenになっておりました。

Issue #147 Insertion of new lines and weird numbering

リンクを探したら、stackoverflowで答えらしきものを書いてある記事を発見

Extra Lines using SyntaxHighlighter for Chrome Only?

ここに、http://alexgorbatchev.com/pub/sh/current/styles/shCore.cssの
.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.5em 0 1em !important;
}
のpaddingを変更して
padding: 0 5px  !important;
と書いてありましたので、まずファイルをダウンロードし、
上の通りにそのまま変更して、
DropboxのPublicフォルダへ入れまして、
linkタグのhrefでDropboxのファイルの方へ変更いたしました。

その結果、なんと元に戻りました!
Chromeでの結果だけなので、IE等でどうなってるか全然分かりません。
ちゃんと見えてたら教えて下さい。