Wordpressやウェブサイトでのシンタックスハイライト方法

ブログを書いていて、カスタマイズ方法を載せたり、学んだことのアウトプットを発信するにはソースコードの表記も必要になってきたりしますよね。

ソースコードを綺麗に表示するにはいくつか方法があるので、どんなやり方ができるかのご紹介です。

あまり詳しく言葉の解説をしていないので、プラグインやショートコードなどがわからないようでしたら調べてみてくださいね。

この記事の目次

1 シンタックスハイライトとは
2 WordPressのページでソースコードを見やすくする方法

シンタックスハイライトとは

シンタックスハイライトというのは開発で使うエディタなどではよくある機能で、ソースコードを自動でカラーリング、行数表示などして見やすくする表示方法です。

実はブログやウェブサイトでもこのような表示ができるのですが、コードをコピーできたりと色々便利な機能もあったりします。

WordPressのページでソースコードを見やすくする方法

シンタックスハイライトの表示には、WordPress用のプラグインを使うか、JavaScript（以下JS）＋CSSが既にまとまっているライブラリを使うかの方法があります。
また、ちょっと別の方法ですが外部サービスを使って埋め込むこともできます。

プラグインはWordPressの機能ですが、JSライブラリや外部サービスを使う方法ではWordPressでもそれ以外のウェブサイトでも使えます。

WordPressプラグインを使う方法

今はSyntaxHighlighter Evolvedが人気のようですね。というわけで使ってみるとこんな感じです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHP Code Example</title>
</head>
<body>
    <h1>PHP コードサンプル</h1>
 
    <p><?php echo 'Hello World!'; ?></p>
 
    <p>この行はハイライトされました</p>
 
    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>
 
    <p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

WordPressのプラグインをインストールして有効化し、該当するソースコードをショートコードで囲むだけです。これはかなり簡単に使えますね。

WordPress初心者でも簡単にできると思いますが、デメリットはプラグインのアップデートが必要になったりブログの動作が重くなる可能性がある点と、プラグインの使用を止める際にショートコードの書き換え作業が必要になります。

（これはショートコード系プラグインの宿命ですが、投稿内の文字を簡単に書き換えるプラグインもあるのでそこまで怯えなくても大丈夫です）。

次はプラグインなしでソースコードを埋め込んだり綺麗に見せる方法です。