Bloggerでソースコードを掲載するためにSyntaxHighlighterを導入しているのですが，少し前からChromeでSyntaxHighlighterの表示が崩れていることに気づいていました． 具体的には，以下のような症状が見られます．
- 行番号が途中で改行（折り返し）されて，複数行表示になる 行番号として機能しておらず，かなり致命的です． 結果的に元のソースコードの行数以上に行が表示される事になるので，ソースコードの最終行以降に空白行が多量生成されてしまい，かなり見栄えが悪いです．
- ソースコードが勝手に改行される なぜかセミコロンのみが次行に表示されてしまいます． しかし，行番号は本来の行数しか表示されないので，勝手に改行された分だけ行番号が不足します．
Chromeは頻繁にアップデートされるのですぐに修正されると思って放置していたのですが，一向に解決しないので自分で対処してみることにしました． 対処方法はWeb上で色々と議論されているので，これらを参考にさせていただきました．直接利用したのは下記のWebサイトです．
具体的にはCSS（Bloggerの場合はテンプレート）に下記のような記述を追加しました． 参考になれば幸いです．
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <link rel='stylesheet' href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' type='text/css'/><style type='text/css'> <!-- .syntaxhighlighter table td.gutter .line { padding: 0 6px 0 13px !important; } .syntaxhighlighter table td.code .line { padding: 0 !important; } .syntaxhighlighter .gutter { padding-right: 1em !important; } .syntaxhighlighter table { padding-bottom: 1px !important; } --></style> |
0 件のコメント:
コメントを投稿