ブログカスタマイズ

syntaxhighlighterの行番号がずれる

ソースコードをhtmlで表示するのには色分けできて見やすいsyntaxhighlighterが綺麗なんだな。でもbloggerテンプレートをカスタマイズする途中でCSSを書き忘れたりして再び不具合が生じるケースはおっちゃんは常なんだな。
今日はソースコードと行番号がずれる件についてgoogle先生を振り返っていると、
p--q　さんの記事にありました。再び習わせてもらいました。

p--q Blogger:SyntaxHighlighter(3)iOS Safariで行番号がずれる問題を解決

bloggerダッシュボードからテンプレートのhtml編集から.syntaxhighlighter{のコードの部分を検索して以下のコードを追加するとスマホでもズレないよ(ｏﾟ∀ﾟｏ)

.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
overflow-y: hidden !important;
-webkit-text-size-adjust: 100%;
}

これで、スマホでもずれていた行番号がぴったりソースコードと揃うようになるんだね