MS Access Tips/Sample and VBA and Blog customize etc...

SyntaxHighlighter を 1.5 から 2.0 にバージョンアップしてみる

以前の記事 でSyntaxHighlighter導入の紹介をしましたが、そのときは 1.5 を導入したのですが、Adobe Flash Playerのバージョンアップに伴いクリップボードコピーがIE以外のプラウザでは使えなくなっているというのが気になっていました。

2.0の方はその後バージョンアップして、クリップボードコピーの対策もなされ、IE6でうまく表示されないというのも解消されているようなので、とりあえず試しにバージョンアップしてみました。

SyntaxHighlighter2.jpg

難易度:

Hosting で試しに導入

SyntaxHighlighter 2.0 ではリンクするだけで使える Hosting サービスを提供していますので、試しにそちらで導入してみました。問題が発生せず調子よければファイルをダウンロードして本格的に導入することにします。

スクリプトの挿入場所は、以前の記事 を参考にしてください。

当ブログでは、<topentry_more> の直後に下記のコードを挿入しました。

SyntaxHighlighter 2.0では テーマ別スタイルシートがあり、それを変更することで簡単にデザインを変更出ます。上記のコードでは、◦shThemeRDark.css というテーマを使用しています。

また、1.5とはHTMLでの記述法等が変更になったのですが、1.5互換用スクリプトの shLegacy.js を読み込んでおくと以前の記述のままで使用することができます。

また、SyntaxHighlighte.All() とhead部に記述するだけですべての対象部分を変換するように簡易化されているのですが、ページをすべて読み込みが終わるまでは表示されないというタイムラグが発生します。それを解消するために今回のように SyntaxHighlighter.HighlightAll を使用する場合も、shLegacy.js は必要になります。

HTMLでの記述

2.0 では class に brush:言語略名 と指定するように変更になっています。また、指定行をハイライト表示する機能も追加されてます。例えば、3,4,5行目をハイライトしたい場合は、highlight:[3,4,5] と指定します。

設定例

言語指定: SyntaxHighlighter:Brushes

オプション設定: SyntaxHighlighter:Configuration

動作確認

問題なく動作すると思えたのですが、IE6, 7 でなぜかサイドメニューに設定した光るエフェクトが動作しないという問題が発生しました。

なんとか解決しましたが、その顛末は サイドメニューのタイトルにも光るエフェクトを の追記を参照ください。

でなんとか動作させることができましたので、後は、暇をみつけて、ファイルダウンロードして、本格的に導入することにします。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/205-51fc91c8
該当の記事は見つかりませんでした。