WordPress記事内にソースコードを綺麗に表示 – SyntaxHighlighter Evolved

もくじ

はじめに

今回は、当ブログでも頻繁に使いますが、WordPressの記事内でソースコードを綺麗に表示させる方法についてご紹介します。

私が使っているのは、プラグイン「SyntaxHighlighter Evolved」です。

普通に何の対処もせずにコードを掲載すると見づらいですよね。
それにPHPのソースコードなどをそのまま掲載すると、表示エラーになったりもしますし。

とりあえず、最初にサンプルです。

① 記事内にそのまま掲載するとこうなる

function keni_admin_menu() {
add_menu_page( ‘賢威 設定メニュー’, ‘賢威の設定’, ‘edit_themes’, ‘keni_admin_menu’, ‘keni_setting’ );

$list = getKeniSetting();
if (isset($list) and count($list) > 0) {
foreach ($list as $no => $list_val) {
$ks_group = $list_val[‘ks_group’];
$keni_list[$ks_group][$no] = $list_val;
}

$menu_no = 0;
foreach ($keni_list as $key => $val) {
if ($menu_no > 0) {
add_submenu_page( ‘keni_admin_menu’, $key, $key, ‘edit_themes’, ‘keni_admin_menu&key=’.urlencode($key), ”.$key.” );
}
$menu_no++;
}
}
}

② SyntaxHighlighter Evolvedを使ったらこうなる

functions.php

function keni_admin_menu() {
	add_menu_page( '賢威 設定メニュー', '賢威の設定', 'edit_themes', 'keni_admin_menu', 'keni_setting' );
	
	$list = getKeniSetting();
	if (isset($list) and count($list) > 0) {
		foreach ($list as $no => $list_val) {
			$ks_group = $list_val['ks_group'];
			$keni_list[$ks_group][$no] = $list_val;
		}

		$menu_no = 0;
		foreach ($keni_list as $key => $val) {
			if ($menu_no > 0) {
				add_submenu_page( 'keni_admin_menu', $key, $key, 'edit_themes', 'keni_admin_menu&key='.urlencode($key), ''.$key.'' );
			}
			$menu_no++;
		}
	}
}

両方とも全く同じソースコードで、賢威のfunctions.phpの一部です。

テキストエディタからコピーしてそのままペーストしたので、①ではタブも効いていません。それにコンテンツエリアの幅の問題で、改行されたくないところが改行されてしまっていますね。

しかし②のようにSyntaxHighlighter Evolvedを使って表示させると、タブも効いていますし、横幅はスクロール出来るようになります。それに色付けもされて、ソースコードが見やすいですね。

それでは、SyntaxHighlighter Evolvedの使い方などについて触れていきたいと思います。

SyntaxHighlighter Evolvedをインストールする

WordPressの管理画面から、「プラグイン」→「新規追加」をクリックし、「SyntaxHighlighter Evolved」と入力して「プラグインの検索」をクリックします。

どのプラグインをインストールする時も言えることですが、検索する際にプラグインの名称を１文字でも間違えていると、目的のプラグインが出てこないことがあります。プラグインを検索する時は、コピペした方が確実です。

検索結果が出てきたら、プラグインの名称を見て間違いないか確認し、間違いなければ「いますぐインストール」をクリックします。

すると「本当にこのプラグインをインストールしてもいいですか？」というダイアログが出てきますので、「OK」をクリックします。

少し待てばインストールが完了しますので、「有効化」をクリックすると、SyntaxHighlighter Evolvedのインストール＆有効化が完了です。

またWordpressの管理画面からインストールする以外にも、WordPress › SyntaxHighlighter Evolved « WordPress Pluginsからダウンロードして直接アップロードしても良いです。

SyntaxHighlighter Evolvedの設定

インストールして有効化したら、もうそれだけでも使えるのですが、自分好みに設定することも可能です。

ちなみにデフォルトで使用すると以下のようになります。
※外部サイトによる実験ですので、キャプチャ画像を表示させてます。

これを、自分好みにカスタマイズすることが出来るわけですね。

WordPressの管理画面から「設定」→「SyntaxHighlighter」をクリックすると、SyntaxHighlighter Evolvedの設定画面が開かれます。

「テーマ」の部分を変更すると、見た目が変わります（変更を保存ボタンよりも下の方にある「ページビュー」で確認できます）。

ちなみにinosh blogでは、テーマを「RDark」にし、「自動リンクを有効にする」のチェックを外しています。その他は、デフォルトのままですね。

ここは、自分の好みに合わせて設定します。

SyntaxHighlighter Evolvedの使い方

使い方は凄く簡単で、ソースコードの言語名を[]で囲み、さらに言語名を囲った[]と[/]でソースコード部分を囲む感じです。

説明が意味不明ですねｗ

こんな感じです↓

するとこのように表示されます↓

ソースコード
ソースコード
ソースコード

この際、Wordpressの記事編集画面において、必ず「ビジュアルモード」ではなく「テキストモード」で記述しなければなりません。

ちなみにSyntaxHighlighter Evolvedの使い方は、SyntaxHighlighterの設定画面を開いてスクロールしていくと、１番下の方にざっくりと説明書きがされています。

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

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

lang または language — ハイライトするコードの言語。パラメータ指定だけでなく〔php]code[/php]のように言語をタグとして記述できます。有効なタグのリストは こちらをクリック (“aliases”の下を参照)
autolinks — 自動リンクの有効・無効
classname — コードボックスに追加するCSSのclass
collapse — コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
firstline — 行番号の出力の際に、最初の行の番号を表す数値
gutter — 左側に行番号を配置するかどうか
highlight — A comma-separated list of line numbers to highlight. You can also specify a range. Example: 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]

出展：

賢威を使っている人は一工夫が必要

賢威6.0を使用している場合は、賢威のCSSとSyntaxHighlighter EvolvedのCSSが競合してしまうため、以下のコードを「design.css」に追記しなければなりません。

design.css

#main-contents .syntaxhighlighter table {
    table-layout: auto;
}

なお、「design.css」に記述しなくても、例えばオリジナルのスタイルシートをアップロードしている場合は、そのCSSファイルに記述しても良いです。

私は、自分で作成したカスタマイズ用スタイルシート「mystyle.css」に記述しています。

表示されるソースコードのスタイルを調整する

SyntaxHighlighter Evolvedを使ってソースコードを表示させた場合、あらかじめデフォルトのスタイルが色々と適用されています。

しかもその全てに!importantが設定されておりますので、自分のCSSでデザインを変えたい場合、こちら側も!importantで応戦しなければなりません（他にも方法はあるかも）。

inosh blogでは、以下のように自分のCSSファイルに追記しています。

mystyle.css

/*************************************
	■ソースコード用スタイル
*************************************/
#main-contents .syntaxhighlighter table {
    table-layout:auto; /* 賢威のCSSとプラグインが競合するバグ修正 */
}

div.syntaxhighlighter table {
    padding-top:10px !important;
    padding-bottom:10px !important;
}

div.syntaxhighlighter {
    margin-top:0 !important;
    margin-bottom:50px !important;
}

div.syntaxhighlighter .line.highlighted.alt1,
div.syntaxhighlighter .line.highlighted.alt2 {
    background-color:#525e61 !important;
}

div.m0-b {
    margin-bottom:0 !important;
}

div.m15em-b {
    margin-bottom:1.5em !important;
}

#main-contents p.source_title {
    background:#ccc;
    padding-left:10px;
    margin-bottom:0;
    border:1px solid #000;
}

18行目～21行目のスタイルは、特定の行をハイライトさせた場合の背景色を#525e61にするためのコードです。

例えばこのように入力すると

こうなります。

Wordpressの記事内にソースコードを表示させる方法
ここをハイライトさせたいメーン
Wordpressの記事内にソースコードを表示させる方法

highlight=””のダブルクォート内に行番号を指定することで、ハイライトさせることが出来るのですが、デフォルトの背景色が少し薄くて分かりにくかったので、自分のCSSで#525e61にしたわけです。

また、テーブル自体にクラス名を指定することもできます。

例えばこのように入力すると

こうなります。

このテーブルのmargin-bottomを0にしたいメーン
このテーブルのmargin-bottomを0にしたいメーン
このテーブルのmargin-bottomを0にしたいメーン

margin-bottomが0に指定されているため、ここがテーブルにひっつくはず

本来であれば、先ほどのmystyle.cssの13行目～16行目でmargin-bottomが50pxになっているのですが、クラス名「m0-b」を指定することで、23行目～25行目の「margin-bottom:0 !important」が適用されるわけですね。

ちなみに31行目～36行目に関しては、デフォルトのスタイルを上書きするといった類のものではなく、自主的にソースコードのタイトルを表示させたい場合のスタイルです。

例えば、このコードはfunctions.phpなんですよーっていうアピールをしたい場合に、ソースコードを表示させる上側にpタグでクラス名「source_title」を指定することで

このようにタイトルバー的な感じでfunctions.phpなんですよーっていうことをアピールできます。

functions.php

このコードはfunctions.phpだぜメーン
このコードはfunctions.phpだぜメーン

私は今のところこれくらいしか使いこなせていませんが、色々な機能がありますので、詳しくはショートコードパラメータをご覧ください。