WordPressに【SyntaxHighlighter Evolved】を導入してソースコードをキレイに見せる

この記事の所要時間: 427

どうも、Noodle.(@Noodle1002)です。引き続きWordpressネタなどをお届けします。Wordpressネタではhtmlphpなどソースコードに絡む内容が含まれることが多々あります。このブログでも何度かソースコードを記事中に記述していたのですが、「これ!これが使うソースコードだよ!」と視覚的に分かり辛いと感じていました。そこでプラグインの力を拝借して、補ってしまいましょうというのが今回の流れになっております。

今回はSyntaxHighlighter Evolvedというプラグインにお世話になってみます。ダッシュボードから検索してインストールできるのはいつもの通りですが、ダウンロードして利用される場合は以下のリンクからどうぞ。

ダウンロードはこちら:SyntaxHighlighter Evolved

SyntaxHighlighter Evolvedの使い方

プラグインを有効化した後、記事中に表示したいソースコードを特定のタグで囲むだけです。とっても簡単でおますなぁ。表示させたいソースコードによって使用するタグが変わりますのでその点だけ覚えておく必要があります。

  • [html]~[/html] … html用
  • [php]~[/php] … php用
  • [css]~[/css] … css用

「~」の部分には表示させたいソースコードを記述します(なお、この[]カッコの部分は半角である必要があります)。例えば前回のエントリーでパンくずリストを表示させる為にBreadcrumb NavXTというプラグインを導入し、ヘッダー部分に以下のようなソースコードを追記しました。

<div class=&quot;breadcrumb&quot;>
<?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}
?>
</div>

これを今回のタグで囲んでみます。ためしに[php]~[/php]で囲んでみましょう。すると…

<div class=&quot;breadcrumb&quot;>
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>

こんな感じに表示させることが出来るわけです。普通のテキストとは違い、色が付いていたり、左端に行番号が割り振られていたりしますね。これでこの箇所がソースコードに該当する部分だということを視覚的に分かりやすく表現することができます。

応用編1|行番号を変更してみる

[php]~[/php]などの[php]の箇所を[php firstline=”20″]とすると行番号が20番から割り振られます。ソースコードは実際の記述から抜粋して表示させることが多いので「何行目からのソースはこのように記述しましょう」といった表現の時に活躍しそうです。

<div class=&quot;breadcrumb&quot;>
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>

応用編2|指定した行を強調する

[php highlight=”3″]という風に記述しておくと、指定した行番号の箇所が強調表示されます。「このソースコードのポイントはココ!」という表現の時に使えそうですね。

<div class=&quot;breadcrumb&quot;>
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>

応用編3|開始行番号を変更しつつ強調表示

上記の記述を複合して表示させることもできます。[php firstline=”20″ highlight=”22″]等と記述するといい感じです。

<div class=&quot;breadcrumb&quot;>
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>

20番から行番号が始まり、22番めの行が強調表示されています。以上の内容だけ覚えておけばこのプラグインを使用することはそんなに難しくないですね。

ソースコードをいじる、もしくは編集することが無い場合は、余り使い勝手のないプラグインではありますが、導入しておいても損は無いかと思います。

それでは、これにて。


コメントを残す