bloggerにSyntax Highlighterを導入する。(JavaScript, CSS)

新生FF14の岩神タイタンが全く倒せなかった白魔導士Lv36です。あれ、もうみんなで攻略見たうえで挑まないと全く歯が立たないです。落ちるわ、岩に閉じ込められるわで、ボロボロの９０分間でした。装備を整えてから、再挑戦しようと思っています。

さて、ソースコードをブログに掲載する時に便利なSyntax Highlighterですが、私は今まであるサイトでソースコードをHTMLに変換したものをブログに貼付けていたんですが、先日PHPのコードを貼付けた際に配色が気に入らなかったのと、日本語が文字化けしてしまったので、Syntax Highlighterに移行する事を決めました。
以下、bloggerでSyntax Highlighter(version3)を導入する為の忘備録です。

1. Syntax Highlighterのサイトで埋め込み用のスクリプトをGenerate

まず、下記のサイトでbloggerに記載すべきスクリプトを生成します。
link: Syntax Highlighter Scripts Generator
テーマと、使うであろう言語を選択してgenerateボタンを押すだけです。
私が選択したテーマはdefaultを使用しました。

2. bloggerのテンプレート編集で、headタグに生成したスクリプトを追記する

bloggerのテンプレート画面から"HTMLの編集"で、headタグ内の下の方に生成したスクリプトを貼付けて適用するだけです。とりあえず、これでSyntax Highlighterの導入は出来ています。ブログ記事の中で、ソースコード記載箇所をpreタグで囲みclass属性に"brush:php"のように言語名を指定します。もし無効な言語を指定した場合、実行時にアラートで警告が出てくれます。

echo "Hello!\n"; 

3. Syntax Highlighterのカスタム

手順2までの状態だと右上に?マークが出ていたり、表示領域にborderがなかったりと素のままなので、 自分の好きなようにCSSを設定しましょう。出来たのが下記の画像のようなものです。枠と角を丸くしたものと内側に影を落としています。

下記が、最終的にheadタグ内に追加したスクリプトの全容です。

iOSのSafariだと、自動でフォントサイズが調整されるため、行番号の表示が崩れてしまいます。-webkit-text-size-adjust: 100%; を指定する事で抑止できます。
?マークを消す記述は SyntaxHighlighter.defaults['toolbar'] = false; で行っています。