「SyntaxHighlighter Evolved」でコードソースを表示させる。

WordPressでPHPスクリプトなどのコードソースを表示されるプラグインを探してみたところ「SyntaxHighlighter Evolved」が有名らしいので早速インストールしてみました。

SyntaxHighlighter Evolvedのインストール方法

管理画面のプラグインの新規追加から「SyntaxHighlighter Evolved」を検索するといくつかのプラグインが表示されるので「SyntaxHighlighter Evolved」を探してから「いますぐインスートール」をクリックします。

その後でSyntaxHighlighter Evolvedプラグインを有効化するとインストールが完了して利用可能になります。

SyntaxHighlighter Evolvedの使い方

対応している言語は「html,actionscript3,bash,coldfusion,cpp,csharp,css,delphi,erlang,fsharp,diff,groovy,javascript,java,javafx,matlab (keywords only),objc,perl,php,text,powershell,python,r,ruby,scala,sql,vb,xml」
と多いです。

表示させたいソースコードを[表記する言語]〜[/表記する言語]でくくるだけで簡単にコードソースを表示できます。

表示例

例えばhtmlのulタグやliタグを表示させたい場合には、

<ul>
<li>これが</li>
<li>表示させたい</li>
<li>タグですよん。</li>
<li>あとは</li>
<li>お好みで</li>
<li>いろいろと</li>
<li>変化させられるみたいです。</li>
</ul>

という感じで表示されます。

SyntaxHighlighter Evolvedでハイライト

SyntaxHighlighter Evolvedでコードソースをハイライトさせる場合には、
［開始タグ highlight=”4,7″］の様にに記述すればOKです。

ハイライトの例

<ul>
<li>これが</li>
<li>表示させたい</li>
<li>タグですよん。</li>
<li>あとは</li>
<li>お好みで</li>
<li>いろいろと</li>
<li>変化させられるみたいです。</li>
</ul>

開始番号を指定できる

１行目から表示するのではなく、指定した行からの表示も可能です。
例えば３行目から表示したい場合には、
［開始タグ firstline=”3″］のように記述します。

指定した行から表示させる例

<ul>
<li>これが</li>
<li>表示させたい</li>
<li>タグですよん。</li>
<li>あとは</li>
<li>お好みで</li>
<li>いろいろと</li>
<li>変化させられるみたいです。</li>
</ul>

SyntaxHighlighter Evolvedはテーマも豊富に用意されているのでお気に入りを見つけることで個性的にコードソースを表示させることができます。

コードソースを表示させるプラグインに迷ったら「SyntaxHighlighter Evolved」にしておけばOKでしょう。(^ ^)