kuwayoshi.com

【WordPress】記事内にソースコードを<pre>タグで表示

WordPressで記事の中にソースコードを書きたいときは、「Crayon Syntax Highlighter」というプラグインを使うと綺麗に表示することが出来ます。
また、HTMLの<pre>タグと合わせることで、ソースコードをお手軽に挿入する方法も紹介します。

Crayon Syntax Highlighterプラグインの準備

まずはWordPressの管理メニュー「プラグイン>新規追加」から、「Crayon Syntax Highlighter」で検索をかけ、プラグインをインストールします。
次にWordPressの管理メニュー「設定>Crayon」から、プラグインの設定画面を開きます。
設定画面で「タグ」メニューの「Crayonsとして<pre>タグをキャプチャ」にチェックを入れ、ページの一番下にある「変更を保存」ボタンをクリックし、準備完了です。

preタグを使ってソースコードの表示

プラグインの準備が出来たら、<pre>タグを使ってソースコードを表示してみます。
ソースコードは、<pre>と</pre>の間に書いていきます。
また、オプションとして「title」でタイトルを、「lang」でプログラム言語を指定出来ます。

ソースコードの表示例

<pre title=”サンプルコード” lang=”HTML”>
ここにソースコードを書いていく。
</pre>

ここにソースコードを書いていく。

まとめ：Crayon Syntax Highlighterプラグインでソースコードを表示

「Crayon Syntax Highlighter」により、ソースコードを表示する方法をまとめました。
langを設定すると言語に合わせてシンタックスハイライトもしてくれるので、複雑なソースコードなども見やすく綺麗に表示してくれます。