WordPressのコード埋め込みプラグイン「Crayon Syntax Highlighter」の使い方まとめ

ウェブ系のWordPressブログで、記事内にコードやHTMLタグを埋め込み(挿入)しているのをよく見かけます。僕も先日、ブログ記事内にコードを埋め込みましたが、「Crayon Syntax Highlighter」というプラグインを使って簡単にできました。今回は、Crayon Syntax Highlighterの設定方法や使い方についてご紹介します。

1.プラグインのインストール

まず、WordPress管理画面のプラグイン > 新規追加 で「Crayon Syntax Highlighter」を検索してインストールおよび有効化します。

2.プラグインの設定方法

WordPress管理画面の設定 > Crayon からプラグインの設定をします。デフォルト(初期)の設定だけでも問題なく使えますが、僕はアイドットデザインさんの記事を参考に、以下の設定にしました。

プラグインの設定内容
  1. ツールバーを「常に表示(Always)」に設定
  2. デフォルトで行を折り返す(Wrap lines by default)を設定

設定箇所は以下の通りです。(ほかの機能はデフォルトで設定されています)

3.プラグインの使い方

実際に、当ブログの記事「STORK(ストーク)のプロフィール設定の方法」で埋め込んだ以下のコードを用いながら使い方を解説します。

①WordPressの投稿編集画面の上にある「Crayon」ボタンをクリック

まず、WordPressの投稿編集画面の上にある「Crayon」ボタンをクリックします。

②コードを貼り付けて「Add(挿入する)」ボタンをクリック

下のような画面が表示されるので、枠内にコードを貼り付けて、右上の「Add」ボタンをクリックします。

たった、これだけでOKです。コードが埋め込まれると、以下のように表示されます。

以上が、WordPressのブログ記事内にコードを挿入するための方法です。次に、記事内に貼り付けられたコードの扱い方についても合わせて説明しておきます。

4.記事内でのコードの扱い方

プラグイン「Crayon Syntax Highlighter」で記事内に張り付けられたコードは、右上のメニューボタンでいろいろな扱い方ができます。

画像中の番号に合わせて、各ボタンの機能を紹介します。

メニューボタンの機能
  1. 左端にある行番号を隠します。
  2. 装飾(色付け)をなくし、コード表記のみを表示します。
  3. コードの折り返し機能の切り替え(ON/OFF)をします。
  4. コードをコピーするために全選択をします。
  5. 別ウィンドウでコードをポップアップ表示します。

ボタン一つでコードの折り返し機能の切り替えや全選択ができるので、覚えておくと、とても便利です。

以上、WordPressにコード埋め込みができるプラグイン「Crayon Syntax Highlighter」の使い方まとめでした。

この記事をシェアする

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

1981年4月、熊本県生まれ。現在、大分市在住。妻と子ども2人(4歳と2歳の男の子)の4人暮らし。趣味はサッカー、読書、インターネット、ブログ、その他面白い話題を見つけること。好きな食べ物はチョコとコーヒーです。よろしくお願いします。