WP SyntaxHighlighterの導入

昨日まで、他のSyntaxHighlighterを使用してきましたが、Amazonアソシエイトを導入したら、突然、SyntaxHighlighterが使えなくなってしまいました(コードがそのまま表示)。理由はわかりませんが相性が悪いのかなと思い、別のSyntaxHighlighterを探してみたら、結構使えそうなSyntaxHighlighterを発見したので、ご紹介します。

SyntaxHilighterとは、プログラムソース(コード)をWebページに掲載する際に、ソースコードを読みやすく表示してくれるJavaScriptライブラリのことです。

WordPressのダッシュボード(管理画面)で、プラグインの『新規追加』をクリックします。キーワードに『wp syntaxhighlighter』と入力して、プラグインの検索を表示します。『wp syntaxhighlighter』を探し出したら、いますぐインストールをクリックします。インストールが完了したら、プラグインを有効化(または、ネットワークで有効化)をクリックします。

使い方

使い方はとても簡単です。ソースコードを入力したい箇所で、ビジュアルエディターのツールバー上の『CODE』ボタンをクリックし、言語と行番号表示の有無を選択したら、ソースコードをテキストボックスにペーストして挿入ボタンをクリックするだけで、ハイライト表示されたコードが表示されるようになります。

又、既に記事上にあるソースコードをハイライト表示させたい場合は、ビジュアルエディターでソースコードを選択、反転表示させ、『pre』ボタンをクリックし、言語と行番号の有無を選択し、『更新』ボタンを押すだけでOKです。

それでは、どのように表示されるか見てみます。下のように表示されます。

WP SyntaxHighlighterの利点

WP SyntaxHighlighterは<pre>タグを使うプラグインである点

SyntaxHighlighterは大別すると、<pre>タグを使ってソースコードをマークアップするプラグインとショートコードを使ってマークアップするプラグインに分かれます。ショートコード自体には基準がなく、同様の互換性がない場合が多く、そのため別のプラグインの乗り換えが難しくなります。

私の場合も、今までのSyntaxHilighterはショートコードを使うタイプだったため、過去のページの書き換えに大分時間がかかりました。これに対して、<pre>タグを使うタイプ同士なら、簡単に乗り換えが可能です。

ビジュアルエディタとHTMLエディタを切り替えても、ソースコードが破壊されない点

SyntaxHighlighterには、ビジュアルエディタとHTMLエディタを切り替えると、ソースコードが破壊されるタイプのものが多いが、この『WP Syntaxhighlighter』は、ビジュアルエディタとHTMLエディタを行き来しても、全くソースコードが破壊されないので、ビジュアルエディタとHTMLエディタの両方を使うユーザーには、かなりの利点だとおもいます。

尚、今回のトラブルで全てのページを書き換えたつもりですが、書き換えてないページ、あるいは書き換えてよって、コードが変更された(間違えている)ページがあればお知らせ下さい。早急に対処します。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ