WordPressテーマ『Luxeritas』でシンタックスハイライターを利用する方法

2019年5月14日

はじめに

WordPress上でコードを表示するには、ブラウザにコードとして認識させないように<pre>タグで囲む必要があります。

例:<pre>で囲った出力結果
function wrapPreformatted( $content = null ) {
   return ‘<pre><code>’ . $content . ‘</code></pre>’;
}
add_shortcode(‘code’, wrapPreformatted);

上記では誤作動せずに表示できるものの、ちょっと寂しいし、長くなると見にくいですよね。
「色を付けて見やすくしたい」というときは、シンタックスハイライターを使いましょう。CSSやJSでカラフルにしてくれます。

昔は『Crayon Syntax Highlighter』というプラグインを利用していましたが、Wordpressテーマ『Luxeritas』なら、デフォルトで搭載しています。

利用するための方法

ショートコードの有効化

管理者画面のメニューから「Luxeritas」⇒「定型文登録」⇒「サンプル登録(ショートコード)」
「ショートコード ( Luxeritas 専用 )」項目

①記述する予定の言語にチェックを入れます。
「全登録しても軽快に動作します」とありますが、ショートコード候補が増えると邪魔なので、必要なものだけでいいでしょう。

②デザインを選択します。

ショートコードの使い方

投稿の編集画面で、エディタ内のボタン【ショートコード】に上記で選択した言語が追加されています。

選択すると以下の2つのショートコードがセットで追加されます。

[highlight_php]][[/highlight_php]

この間に表示させたいコードを記述すれば、ハイライトされて表示されます。

function wrapPreformatted( $content = null ) {
return ‘<pre><code>’ . $content . ‘</code></pre>’;
}
add_shortcode(‘code’, ‘wrapPreformatted‘);

他のプラグインに比べて簡素ですが、ハイライトとクリップボードへのコピーはできるため、機能としては十分ですね。