SyntaxHilighterをBloggerで利用する方法

Syntax Hilighterをどうしても使ってみたくて…

ようやく Blogger にコードが貼れるようになった。。。 自分は主に Javascript を扱っているので JavaScript のみ。

function foo () {
    window.alert('bar');
}

やり方自体は、alexgorbatchev.comにあるソースコードを拝借するやり方。

Syntax Hilighterが使える環境作り

1. Bloggerへ埋め込むタグを取得
   1. SYNTAX HIGHLIGHTER SCRIPTS GENERATORへアクセス
   2. テーマ、ブラシを選択
   3. 「Generate」を選択
   4. できあがったタグをコピーしておく
2. 取得したタグをBloggerへ埋め込む
   1. Syntax Hilighter を適用したい Blogger の管理画面を開く
   2. 左側メニューから「テンプレート」を選択
      
   3. 「HTMLの編集」を選択
      
   4. "</head>"を検索して、先ほどコピーしておいたタグを"</head>"の直前へ貼り付け
      

環境準備は以上で終了。 次は、実際に使ってみます。

ブログ中で使う

1. とりあえず新規投稿を作成
2. preタグでちょちょっと書き込み。
   

という感じでできてしまいました。

ここに至るまで、いろいろと試行錯誤したけど 「Syntax Hilighter のソースコードをどうやって読み込ませるか」 という問題になってしまう。

これに対して考えた方法は次の通り。

• Blogger のテンプレートへ直接 SyntaxHilighter のソースコードを埋め込む
• ストレージサービス(googleドキュメント、dropbox、skydrive等) へ SyntaxHilighter のソースコードを保存して参照させる
• 他のサイトから拝借。→HOW TO ADD SYNTAX HIGHLIGHTER(V3) TO BLOGGER BLOGS

参考にしたブログは↓

• BloggerにおけるSyntaxHighlighter Ver.3.x
• まずBloggerにSyntax Highlighter 3.0を適用してみる
• Blogger でコードをシンタックスハイライトする

まだ、やれそうなこともありそうですが… 基本的な機能を使うだけなら現状で十分なんだろうなぁ。

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter