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

SyntaxHighlighter 3.0 を導入する

タイトル画像

前回の記事で検討した結果、SyntaxHighlighter3.0を導入することにしました。

その導入手順について解説します。

難易度:

ダウンロード

下記のページの Click here to download のリンクをクリックしてください。

SyntaxHighlighter - Download

ダウンロードページ

ZIPファイルがダウンロードされますので、適当な場所に解凍してください。

アップロード

scriptsフォルダー内の下記のファイルをブログにアップロードします。

ファイル名用途
shCore.js絶対必要な基本スクリプト
shLegacy.js旧バージョンと互換性を持たせるためスクリプト

shLegacy.js は、旧バージョンを使用していた場合は必要ですが、新規に導入する場合は必要ないです。

あとは、shBrush****.js ファイルは、**** が自分が必要な言語名のものをアップロードします。Hatena は下記をアップロードしました。

ファイル名用途
shBrushCss.jsCSS用
shBrushJScript.jsJavaScript用
shBrushPlain.jsテキスト用
shBrushSql.jsSQL用
shBrushXml.jsHTML用
shBrushVb.jsVB用

stylesフォルダー内からは、「shCore.css」と「shTheme****.css」をセットでアップロードします。****の部分がテーマになりますので、下記のページのサンプルをみてお好みのものを選択してください。

SyntaxHighlighter - Themes

「shCore****.css」というファイルをありますが、これは「shCore.css」と「shTheme****.css」を一つにまとめたものです。通常はテーマは一つだけしか使わないと思いますので、その場合は、このファイルを一つだけアップロードすればいいです。

SyntaxHighlighter2.0では、RDark というテーマをカスタマイズして使用していたので、今回もこれをアップロードしました。

ファイル名用途
shCoreRDark.cssテーマRDark用スタイルシート+基本スタイルシート

アップロードしたら、アップロード先のURLは記録しておいてください。

ブログへの設置法

FC2プログを基準に説明しますので、他プログの場合はそちらの仕様に合わせて変更してください。

まずは、新規導入する場合の一般的な設置法から。テンプレートのHTML編集の headタグ内に下記のコードを記述します。

shCore****.css はお好みのテーマのファイルを、shBrush****.js は必要な言語のファイルを指定してください。投稿記事のコード部分は下記のように preタグで囲みます。言語指定は、class属性に blush:言語名 を付加します。

結果は下記のような表示になります。

結果表示

preタグを使う場合は、例えば HTMLのタグである「<」は「<」に変換しておく必要があります。

公式ページには、scriptタグを使う方法も紹介されています。

こちらは、HTMLタグの変換は不必要なのはメリットですが、scriptが読み込まれるまでコードが表示されない、script実行が禁止されている場合も非表示になるというのがデメリットです。また、他のスクリプトとの相性で表示されないということもあるそうです。

そこで公式にはないですが、textarea を使用できないか調べてみました。(1.5の時はできていましたので)
SyntaxHighlighter.all の前に下記のように使用するタグを指定できるようです。

こうすれば textarea にコードを記述できるので、HTMLタグの変換は不必要になります。

こちらはscript実行が禁止されている場合でも表示されます。

どれを使うかはお好みで選択すればいいでしょう。当ブログでは SyntaxHighlighter1.5 の時から textarea を使用していたのでこの設定はありがたいです。

旧バージョンとの互換性 shLegacy.js

SyntaxHighlighte は、1.5以前と2.0以降では、class属性での設定やメソッドなどに変更があります。1.5以前から使っていて、以前の設定のものが残っている場合、shLegacy.js を読み込んでおくと、以前の記事を変更する必要がなくそのまま利用できます。

1.5の時のclass属性の記述は下記のようでした。

古い記事にはこのような記述が残っています。これをすべて書き換えるのは大変なので、shLegacy.js を読み込むようにしました。

また、SyntaxHighlighter.all()では古いclass設定に反映されません。
name="code" の属性を対象にハイライトをするので、呼び出すメソッドも下記のようになります。

これはコード部分のあとで実行する必要があるので、</body> の前に記述しておくのが確実です。当ブログでは追記部分にしかコードはないので、<%topentry_more> の直後に記述しました。

この記述で古いclass設定でも新しいでも反映されます。

当分はこの設定にしておいて、時間をみて、古い記事のコードのclass設定を変更していって、変更し終わったら、shLegacy.js なしの方法に変更する予定です。

まとめ

ファイルをアップロードして、cssファイル、jsファイルの読み込みコードを変更するだけで、過去の記事も含めてすべてハイライトが反映されて、あっけなく導入できてしまいました。

最初から、shLegacy.js を読み込んでいたので、他の部分はまったく変更する必要はありませんでした。

SyntaxHighlighter.config.tagName で対象タグを変更できることなどは、この記事を書くにあたっていろいろ調べているうちに発見したことです。

これで、導入はできたのですが、下記の点で不満があります。

縦スクロールバーが常に表示されるている。
長いコードがある場合、折り返されずに、横スクロールバーが出る。隠れている部分はみるにはスクロールする必要がある。
1行毎に背景色を変えて、縞々にしたい。

つまり、2.0の時の同様の下記のような表示にしたいということです。

2.0の時の表示

こちらのカスタマイズについては次回の記事で。

拍手する

Leave a reply






Trackbacks

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