【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を設定すると言語に合わせてシンタックスハイライトもしてくれるので、複雑なソースコードなども見やすく綺麗に表示してくれます。

Share

  • Twitter Shareボタン
  • Facebook Shareボタン
  • はてなブックマーク Shareボタン
  • LINE Shareボタン

Comments

  1. […] て不便なのでタグ入力で対応しています。pre titleでタイトルを、langで言語の設定です。下のサイトさんの記事を参考にしました。 【WordPress】記事内にソースコードを <pre>タグで表示 […]

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。