2011年7月8日金曜日

引っ越したし、SyntaxHighlighter3をBloggerに導入してみた。

てか今まで存在知りませんでした。はい。
こんな感じのソースをかっこ良く貼り付けているやつです。

 public void hogehoge(){
  // コメント
  hoge();
 }

なにこれカコ(・∀・)イイ!!
と思って、いつか調べよう調べよう…と思っていたら今になりました。
多分1年くらい思っていただけだと思います。

まあjsとcss取り込むだけですが。

だったのだが、なんかバージョン1.5/2系からバージョン3系でずいぶんと違うようでした。

特にbloggerに取り込むには
ここ(FaziBear's Blogger Widgets)」に行って取り込むだけ!!
という記述が多いのですが…

既にこのサイトはなんか放置っぽく駄目でした…残念。


結局本家サイトに行ってドキュメント読んで解決。

というわけで先ずはSyntaxHighlighterを公開されているこちらにGO!
http://alexgorbatchev.com/SyntaxHighlighter/
んでintergrationに行きましょう
http://alexgorbatchev.com/SyntaxHighlighter/integration.html

Bの項目にいっぱいBlogger Easy InstallationやらBlogger Install Guideやらのリンクが貼られています。

全部読んでないけどとりあえず言えることは以下をコピって<head>内に突っ込んどけって事のようです。
まあ、Bloggerに限らずブログじゃjsとかcssとか置く場所ないもんね。…ないよね?

 <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
 <link href='http://alexgorbatchev.com/pub/sh/current/styles/表示したいテーマ.css' rel='stylesheet' type='text/css'/>
 
 
 

ちなみにバージョンを限定したければ、currentの部分をこちらに従って変えましょう。
http://alexgorbatchev.com/SyntaxHighlighter/hosting.html

テーマはthemesから気に入ったものを
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

ソース形式はこちらを見て好きなだけ
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

あと、流石に自分のHP用の場合は、ソースごと落としたほうがいいと思います。多分。

その他 SyntaxHighlighter.config.bloggerMode = true;は「If you are hosting on blogger.com, you must turn this on.」と言っていますので、 Bloggerで使用するならいれておかないと駄目らしいです。

さてこれで準備は完了。
後はこちらで効果を見て、その時々で自分にあったものを書けばいいと思います。
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

で、よく使うものはデフォルトで設定しておくと幸せかもしれませんね。

つってもそこまで深く考える必要が無かったら

 

  hogehoge
 

だけで十分かと。


ちなみに

 

  <> ← これとかをエスケープとかに直す必要なし!
  もしくは html-script: true を指定してもOK!
 

で非常に便利です。 素晴らしい!

0 件のコメント:

コメントを投稿