SyntaxHilighterをBloggerで利用する方法

0 件のコメント

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

参考にしたブログは↓

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