Contents

SyntaxHighlighterとは?

まず、この備忘録を綴るためにも必須だろうということで、SyntaxHighlighterについて調べてみました。SyntaxHighlighterは、サイトの記事などに表示するソースコードの構文を強調して表示してくれるJavascriptライブラリのひとつです。SyntaxHighlighterを使えば、サイト内に表示させるソースコードがとても見やすくなるんです。

サンプル

<;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>;
<;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;>;
<;head>;
    <;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; />;
    <;title>;PHP Code Example<;/title>;
<;/head>;
<;body>;
    <;h1>;PHP コードサンプル<;/h1>;
    <;p>;<;?php echo 'Hello World!'; ?>;<;/p>;
    <;p>;<;a href=&quot;http://wordpress.org/&quot;>;WordPress<;/a>;<;/p>;
<;/body>;
<;/html>;

本来なら、SyntaxHighliterのサイトからファイルをダウンロードし、サーバーにアップロードし、いろいろと設定をするのですが、このブログはWordPressで運営しているので、便利なプラグインを使ってしまうことにします。

SyntaxHighlighter系のプラグインはいくつかあるようですが、ざっとググったところ、「SyntaxHighlighter Evolved」というものが良さそうなので、そちらを使うことにします。

SyntaxHighlghiter Evolvedのインストール

まず、インストールはブラウザ上で、WordPressの管理画面から行いました。

  1. WordPress管理画面の「プラグイン」→「新規追加」で「SyntaxHighlighter」と検索
    プラグイン新規追加

    一番上に出てきました。

  2. 「いますぐインストール」をクリックで、無事インストール完了です。
    あとは、プラグインを有効化すればOK。

SyntaxHighlighter Evolvedの設定

次に、設定を行いましょう。まず、プラグイン画面で設定をクリック

SyntaxHighlighter設定画面へ

すると、次のような設定画面に変わります。

SyntaxHighlighter設定ページ

この画面から次のような項目が設定できます。

SyntaxHighlighterのバージョン

設定画面の説明:「バージョン3は、訪問者が簡単にマウスを使用して(ドラッグかダブルクリック)、コードの部分を強調表示し、クリップボードにへコピーできます。Flashベースボタンを含むツールバーが不要です。」

テーマ

スタイルのテーマを選択できます。(Default,Django,Eclipse,Emacs,Fade to Grey,Midnight,RDark,[なし])

SyntaxHighlighter Django

テーマ「Django」の例

すべてのブラシを読み込む

チェックボックスをオンにすると、常に全ての言語ファイルが読み込まれる。オフだと、必要に応じて読み込まれる。デフォルトはオフ。

行番号を表示する

行番号を表示するかどうか

行番号なし

行番号の表示なし

ツールバーを表示する

ツールバー(右上の?)を表示するかどうか

ツールバー表示

ツールバー表示

自動リンクを有効にする

コード内のリンクを自動で有効にするか

コードボックスの表示を閉じておく

コードボックスを閉じておくか

コードボックスを閉じる

コードボックスを閉じている例

軽い表示モードを使う

行番号やツールバーを表示しないモードにするか

インデントタブを許容するスマートタブを使う

スマートタブを使うかどうか

長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)

長い行を端で折り返すかどうか

追加のCSSのclass名(複数可能)

コードボックスへのclass名を追加するか

行番号の開始

ソースコードを、何番目の行番号から表示させるか

行番号の余白

行番号を「1,2,3,…」と表示するか、「01,02,03,..」や「001,002,003,…」というように表示するかを選択できる

タブのサイズ

ソースコード中のタブが半角スペース何個分か

タイトル

コードボックスにつけるタイトルを記入できる。

使い方

使い方は、いたって簡単です。
表示させたいソースコードを[ソースコードの言語名][/ソースコードの言語名]というショートコードで囲むだけです。

例えば、

<html>
<body>
    <h1>サンプル</h1>
    <p>こんにちは!</p>
</body>
</html>

と表示させたい場合、次のように記述します。

[html]
<html>
<body>
    <h1>サンプル</h1>
    <p>こんにちは!</p>
</body>
</html>
[/html]

とても簡単ですね。
他にも、ショートコードでパラメータを指定できるようですが、そちらは、必要になれば見ていこうと思います。

参考サイト