WordPress記事内にソースコードを綺麗に表示 – SyntaxHighlighter Evolved
公開日: 2014年04月26日
最終更新日: 2014年06月09日
Wordpressの記事内において、ソースコードを綺麗に表示させるためのプラグイン「SyntaxHighlighter Evolved」の一般的な設定方法、使用方法、CSSを適用させるための注意点や例などについて解説します。
もくじ
– 目次 –
はじめに
今回は、当ブログでも頻繁に使いますが、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」と入力して「プラグインの検索」をクリックします。
どのプラグインをインストールする時も言えることですが、検索する際にプラグインの名称を1文字でも間違えていると、目的のプラグインが出てこないことがあります。プラグインを検索する時は、コピペした方が確実です。
検索結果が出てきたら、プラグインの名称を見て間違いないか確認し、間違いなければ「いますぐインストール」をクリックします。
すると「本当にこのプラグインをインストールしてもいいですか?」というダイアログが出てきますので、「OK」をクリックします。
少し待てばインストールが完了しますので、「有効化」をクリックすると、SyntaxHighlighter Evolvedのインストール&有効化が完了です。
またWordpressの管理画面からインストールする以外にも、WordPress › SyntaxHighlighter Evolved « WordPress Pluginsからダウンロードして直接アップロードしても良いです。
SyntaxHighlighter Evolvedの設定
インストールして有効化したら、もうそれだけでも使えるのですが、自分好みに設定することも可能です。
ちなみにデフォルトで使用すると以下のようになります。
※外部サイトによる実験ですので、キャプチャ画像を表示させてます。
これを、自分好みにカスタマイズすることが出来るわけですね。
WordPressの管理画面から「設定」→「SyntaxHighlighter」をクリックすると、SyntaxHighlighter Evolvedの設定画面が開かれます。
「テーマ」の部分を変更すると、見た目が変わります(変更を保存ボタンよりも下の方にある「ページビュー」で確認できます)。
ちなみにinosh blogでは、テーマを「RDark」にし、「自動リンクを有効にする」のチェックを外しています。その他は、デフォルトのままですね。
ここは、自分の好みに合わせて設定します。
SyntaxHighlighter Evolvedの使い方
使い方は凄く簡単で、ソースコードの言語名を[]で囲み、さらに言語名を囲った[]と[/]でソースコード部分を囲む感じです。
説明が意味不明ですねw
こんな感じです↓
するとこのように表示されます↓
ソースコード ソースコード ソースコード
この際、Wordpressの記事編集画面において、必ず「ビジュアルモード」ではなく「テキストモード」で記述しなければなりません。
ちなみにSyntaxHighlighter Evolvedの使い方は、SyntaxHighlighterの設定画面を開いてスクロールしていくと、1番下の方にざっくりと説明書きがされています。
ショートコードパラメータ
これらはショートコードで渡すことができるパラメータと説明です。 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」に記述しています。
現在はこの対処は必要ない?
私がinosh blogにSyntaxHighlighter Evolvedをインストールした当初は、上記のスタイルを適用させないとちゃんと表示されませんでした。
が、この記事を執筆するにあたり、上記の記述を消去して試してみたところ、正常に表示されました。SyntaxHighlighter Evolvedが更新されたか何かで、問題が解決したのかもしれません。
表示されるソースコードのスタイルを調整する
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だぜメーン
私は今のところこれくらいしか使いこなせていませんが、色々な機能がありますので、詳しくはショートコードパラメータをご覧ください。