記事にソースコードを載せるときにSyntaxHighlighterを利用しているのですが、このまえブログのテンプレートを変えて、それに合わせてSyntaxHighlighterの文字サイズを少し小さめにしたいと思ったんですが、なかなかうまくいかないんですよね。
ほんとは、shCore.cssを直せば簡単にできると思うんですが、このブログ、Bloggerを使っているのでスクリプトファイルは公開サーバーのものを利用しているから直せないんですよね。
それで、いろいろ試してみてやっと出来たので、そのやり方を公開します。
まず、preタグにclass-nameを設定します。
<pre class="brush:css; class-name:'highlighter'"></pre>
そして、テンプレートに次の記述を加えます。
<style>
.highlighter{
font-size:0.9em !important;
}
</style>
もとのサイズが1emなので、0.9emにして若干小さくしています。
重要なのは、!importantです。
元のshCore.cssに既に!importantが付けられているので、これを付けないとスタイルが何も変更されないんですよね。
最初、このことに気づかなくてかなり四苦八苦してしまいました。（汗）
スポンサーリンク