SyntaxHighlighter 最新のverを使用できるように設定してみた

これまたかなり久々。。。

いままでこのブログで公開したコードは基本的にSyntaxHighlighterの1.5を使用していました。

しかし、今日確認するとコードのハイライトが反映されない?!!

なんで??



まあ、そもそもホスティングされているのかもわからないようなコードを無理やり利用する方法だったのが問題だった。

(我ながらよく確認もしないで利用していたものだ)なのでversion upも兼ねて公式で公開されていたブロガーでの利用方法で設定し直してみた。


まずはSyntaxHighlighterを参考にしています。この中でホスティング情報が掲載されています。

(というかAmazon S3使ってホスティングしてるのにビックリしたというかこんな形でAmazon S3が役立っているとは考えたことがなかった。。。ほんと勉強不足だなぁ~)currentというURLもあるので新しい物好きな人は特に変更を加えなくても最新に変更されて行くみたいです。(大きな変更(1.5.1->2.xのような)が発生した場合はどうなるかわかりませんが。。。)

ホスティングの文面で毎月83Gの通信は発生していて40ドルかかってるそうだ。開発を続けるためにも寄付をお願いします。というメッセージが。。。

望めばContributorsとしてdonateに名前を掲載してもらえるみたい。


実際の設定は最初は迷ったが、Extensions & Integration上にブロガーでの設定方法が掲載されています。私が参考にしたのはAdding a Syntax Highlighter to your Blogger blogという記事です。書かれている内容をそのまま実践するだけでSyntaxHighlighterが利用可能になります。



とっても簡単に訳すと以下のようになります。
</head>

タグの手前(要はheadタグ内で)に以下のコードを記述します。(使用言語に応じてロードするjsファイルを調整してください。)

<!--SYNTAX HIGHLIGHTER BEGINS-->
<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/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->


でもって

<pre class="brush: html">
</pre>

赤い文字部分が言語に応じて変更が必要な部分です。種類についてはBundled Brushesを参照してください。



後は私のように1.5系からversionupする人へのメッセージです。

残念ながら新しいSyntaxHighlighterを適用させるには1.5系ではname属性にしていた名前(code等)+class属性に適用させたい言語(htmlやjava等)を記述する必要があったのですが、それがclassのみで設定できるようになります。

ただし、今までに投稿した記事も手直しが必要になるので大変です!!

まあ、1.5系のホスティングもあるので私みたいにテキトな人でなければそちらを利用するのも手だと思います。


まあ、このサイトで変更が必要な箇所はおいおい直していくことにしよう。。。(どうせそんなに見る人いないしね)

Posted in ラベル: | 0 コメント