BloggerにSyntaxHighligterを入れる

もうたくさんの人が書いてるネタだけど書いておきます。
今回コチラで実施した内容をサマリーすると。

①ジェネレータでJavaScriptとCSSを作成する

②作成した①のコードをBloggerのテンプレートに取り込む

③コードで表示したい部分を<pre>タグで囲む

という感じ。

①について

コードのハイライトは多分以下の２点で実現してる。

・コードの部分がきれいに見えるようなCSSを作る

・JavaScriptで↑のCSSがいい感じに当たるように処理をする

で、ジェネレータでは選択された言語に応じて↑の二つを上手く実行するようなJavaScriptとCSSを作ってるんだとおもう。
ジェネレートされたコードを見てみると。

のようになっており（雰囲気的には）上から順番に。

• SyntaxHighligterのコアCSSを読み込む
• eclipseの見栄えになるようのCSSを読み込む
• 各言語に応じたJavaSctipを読み込む
• SyntaxHighligterの処理を実行する

となっているもよう。
＃CSSとかJavaScriptの中身とかは今度のぞいてみたい。

②について

Bloggerのテンプレート設定があるのでそこからやります。

JavaScriptの関数宣言や外部ソース取得、CSSの外部ソース取得はHTMLの<header>部で行うので、Bloggerのテンプレートに①で取得したものを埋め込むことで、自分ちのブログで有効にすることができる。
うちだとこうした。

③について

とりあえずコードっぽいものを書いてみて<pre class="brush: html;">タグで囲んでみるといいかもしれない。
それ以降の色々できることはおいおいためしていきましょう。

一旦ここまで。