ワードプレスの記事にソースコードを載せるプラグイン「Syntax Highlighter」

技術系のブログをやっていると必ずと言っていいほど必要になるのが、
ソースコードを記事に載せたいということ。
そのまま記事として書けばタグとして認識されてしまったり、表示が不格好になってしまいます。
きっとあなたも技術者だったら他のブログでソースコードビューアなるものを見たことがあるでしょう。

ソースコードを載せるプラグインはいろいろあるのですが、私がおすすめするのは「SyntaxHighlighter」です。インストールさえすればすぐに使えます。


使い方

ワードプレスのプラグインの追加はお決まりになりますが、「プラグイン」→「新規追加」→「SyntaxHighlighter」と検索してください。

お使いのバージョンのWordPressではテストされていません

と出ておりますが、私のワードプレスのバージョンは4.8.2–jaですが問題なく使えています。
インストールが終わり「有効化」をすると、左側のグローバルメニューの「設定」にマウスカーソルを当てると、「SyntaxHighlighter」が追加されています。
特に必要なければ設定はデフォルトのままでもいきなり使えますが、どんな設定ができるかご紹介します。

SyntaxHighlighterのバージョン

バージョン3は、訪問者が簡単にマウスを使用して(ドラッグかダブルクリック)、コードの部分を強調表示し、クリップボードにへコピーできます。Flashベースボタンを含むツールバーが不要です。
バージョン2は行 の折り返しが許可されています、この機能は現時点でバージョン3はサポートされません

と書かれています。お好みで良いと思いますが、私は「バージョン3.x」を選びました。

テーマ

テーマは表示されたときに色合いになるのですが、7種類ものテーマから好きなものを選ぶことができます。

■デフォルト

■Django

■Eclipse

■Emacs

■Fadetogrey

■Midnight

■Rdark

ちなみに「なし」もあるのですが、記事との差別化がないのでたぶん分かりづらいと思います。
私はRdarkが気に入ったのでこちらを採用しました。

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

常にすべての言語ファイルを読込みます(ショートコードではなく、preタグを直接使用する場合)
オフ(デフォルト)の場合、言語ファイルは必要に応じてロードされます。
よくわからない場合は、このチェックボックスをオフのままにしてください。

通常はチェックを外した状態で問題ないと思います。
ビジュアルエディターなどで別のプラグインを利用する場合はチェックをするようです。

規定の設定

設定はコードの出力ごとに構成できますが、規定の設定をここで指定できます

こちらも特にデフォルトのままで問題ないと思います。
試しにいろいろチェックしてみて動作を確認してみてください。

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

ソースコードビューアの中で、classを指定してスタイルを定義したい場合に使います。

行番号の開始

こちらも通常であれば「1」で問題ないです。(逆に1以外を指定したい例が思い浮かばないです)

行番号の余白

行番号の桁数が指定できます。仮に「2」にすると一桁の行番号は「01、02…」と続きます。

タブのサイズ

タブの長さです。こちらもデフォルトの「4」で問題ないと思います。

タイトル

ソースコードビューアの上に表示されるタイトルです。
基本的に記事内で説明をしていくのであればいらないと思います。


投稿方法

このプラグインはショートコードで反応するようになっているようです。

■CSSを表示させたい場合

[css]
.hello{
    color:#333333;
}
[/css]

表示結果

.hello{
    color:#333333;
}

■HTMLを表示させたい場合

[html]
<h1>hello world</h1>
[/html]

表示結果

echo "hello world";

■PHPを表示させたい場合

[php]
echo "hello world";
[/php]

表示結果

echo "hello world";

ショートコードパラメータ

これらはショートコードで渡すことができるパラメータと説明です。 bool値(有効・無効など)の指定には true/1 または false/0 を渡してください。

lang または language — ハイライトするコードの言語。パラメータ指定だけでなく[php]code[/php]のように言語をタグとして記述できます。有効なタグのリストは こちらをクリック (“aliases”の下を参照)
autolinks — 自動リンクの有効・無効
classname — コードボックスに追加するCSSのclass
collapse — コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
firstline — 行番号の出力の際に、最初の行の番号を表す数値
gutter — 左側に行番号を配置するかどうか
highlight — ハイライトする行番号のカンマ区切りのリスト。範囲を指定することもできます。 例: 2,5-10,12
htmlscript — HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。
light — 行番号やツールバーを無効にする軽い表示モードのオン・オフ
padlinenumbers — 行番号の余白。有効な値は、 false(余白なし), true (自動)、数値(余白)
title (v3のみ) — コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。
toolbar — ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
wraplines (v2のみ) — 折り返しの有効・無効

■引数指定の例:

[php]ここにコードを入れます[/php]
[css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="example-filename.php"]ここにコードを入れます[/css]
[code lang="js"]ここにコードを入れます[/code]
[sourcecode language="plain"]ここにコードを入れます[/sourcecode]

Leave a Reply

Your email address will not be published. Required fields are marked *

two × 5 =