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

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

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

プラグインの準備

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

ソースコードの表示

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

表示例

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

まとめ

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


【WordPress】記事内にソースコードを<pre>タグで表示」への3件のフィードバック

  1. ピンバック: ブログ記事にソースコードを表示させるには“Crayon Syntax Highlighter”が簡単便利

  2. ピンバック: Crayon Syntax Highlighter | WEBデザインMATOME

  3. ピンバック: 共通部分をPHPにて切り分け | WEBデザインMATOME

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です