【SyntaxHighlighter】Bloggerから読み込むライブラリをcdnjsに変更してみました。

以前、httpsのURLでアクセスするとハイライト表示されなくて、ハイライト表示をGoogle Code Prettifyに変えてみたという記事を書きましたが、今日、いろいろ試したところSyntaxHighlighterでもハイライト表示させることに成功しました。

結論から言うとライブラリの読込先をcdnjsに変更しました。

いままでSyntaxHighlighterの公開サーバーは、alexgorbatchev.comしかないと思っていましたが、今日、ネットで探してみたところ「cdnjs」というCDNがあっさり見つかりました。(笑)

cdnjs.com

このCDN、私は全く知らなかったのですが、実に3000以上ものライブラリを公開しています。

まったく驚愕です！

Read More

BloggerでSyntaxHighlighterの文字サイズを変更する方法

記事にソースコードを載せるときに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が付けられているので、これを付けないとスタイルが何も変更されないんですよね。

最初、このことに気づかなくてかなり四苦八苦してしまいました。（汗）

Read More