WordPress 記事内でコードを綺麗に表示するプラグイン「Crayon Syntax Highlighter」の使い方

WordPress

WordPress 記事内でコードを綺麗に表示するプラグイン「Crayon Syntax Highlighter」の使い方

記事内でソースコードを書きたいとき、WordPressプラグイン「Crayon Syntax Highlighter」を使うと、綺麗にコードを表示することができます。IT系のブログ運営者にとっては重宝するプラグインです。

このプラグインは設定項目がたくさんあるので、初めて利用する方は少しとっつきにくいと感じるかもしれません。ですが、使い方はとても簡単です。今回は、Crayon Syntax Highlighterの使い方を解説していきます。

インストール

Crayon Syntax Highlighterをインストールしていない方は、ダッシュボードのプラグイン新規追加画面で「Crayon Syntax Highlighter」と検索し、該当するプラグインをインストールしましょう、

WordPressダッシュボードのプラグイン新規追加画面

Crayon Syntax HighlighterはWordPress公式サイトからZIPファイルをダウンロードすることもできます。

Crayon Syntax Highlighterのダウンロードページ
Crayon Syntax Highlighterのダウンロードページ
https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

プラグインの詳しいインストール方法については以下の記事を参照してください。

使い方

ソースコードの表示スタイルについては、Crayon Syntax Highlighterの管理画面から設定する方法と、ソースコード挿入時に設定する方法があります。

基本的には管理画面で設定した内容が適用されますが、挿入時に設定を行うとそちらが優先されます。例外的に別のスタイルを適用させたいときのみ挿入時の設定を変更するとよいでしょう。

管理画面

Crayon Syntax Highlighterの管理画面は、設定>Crayonにあります。

WordPressダッシュボード

デフォルト設定はこんな感じ。

Crayon Syntax Highlighterの管理画面

設定はデフォルトのままでも問題なく使えます。変更した場合はページ下部の「変更を保存」をクリックするのを忘れずに。

テーマは60種類近くあります。サイトの雰囲気やテーマカラーに合わせて選んでもよいでしょう。ちなみに私がいいなと思ったのは以下の7個です。

Crayon Syntax Highlighterのテーマ

デザインにこだわりたい場合は、オリジナルのテーマを作ることもできます。プルダウンリストから元にするテーマを選択し、「Duplicate」をクリックするとそのテーマが複製されます。「Edit」で編集、「Delete」で削除です。

Crayon Syntax Highlighterの管理画面

「Edit」をクリックすると編集画面に切り替わり、文字色など細かい設定が行えるようになります。設定が終わったら必ず「更新」をクリックしましょう。

Crayon Syntax Highlighterのテーマ編集画面

スポンサーリンク

ツールバーというのは、以下の画像の枠で囲っている部分になります。

Crayon Syntax Highlighterのツールバー

挿入画面

実際にソースコードを表示するときは、記事投稿画面をテキストモードにし、クイックタグ「crayon」をクリックします。

WordPressダッシュボードの記事投稿画面

基本的には、「コード」の部分にソースコードを入力し、「挿入」をクリックすればOKです。ほかは設定しなくても問題ありません。

Add Code画面

タイトル ソースコードのタイトル。ツールバーの左側に表示される。
プログラム言語 ソースコードの言語を選択。自動的に判定してくれるので「Default」のままでもOK。
マークするライン 行数を入力すると、その行が強調される。
1文章として表示 チェックすると、改行は無視され1行で表示される。

「設定」以下の項目は管理画面と同じです。管理画面で設定したスタイルとは別のスタイルで表示したい場合に各項目を変更しましょう。

編集方法

ソースコードや設定を変更したい場合は、ビジュアルモードに切り替えて編集領域をクリック⇒クイックタグ「<>」をクリックすると、Add Code画面が表示されて設定を変更できるようになります。

WordPressダッシュボードの記事投稿画面

ソースコードが1行のときの設定

Crayon Syntax Highlighterは、1行だけの短いコードやパスなどを表示するときにも使えます。その場合は「1文章として表示」にチェックを付けて挿入しても良いのですが、それだとちょっと見た目がかっこ悪いです。

↓こうすると……

Add Code画面

↓こうなる。

Crayon Syntax Highlighterを使ったソースコードの表示

ということで、私は短いコードやパスを挿入するとき、以下のような設定にしています。

Add Code画面

ツールバーの表示 表示しない
コード行を縞模様で表示する チェックなし
デフォルトで行番号を表示 チェックなし
Wrap lines by default チェック

上記のように設定すると、以下のように表示されます。「1文章として表示」にチェックを付けるより良い感じではないでしょうか。

Crayon Syntax Highlighterを使ったソースコードの表示

おわりに

基本的な設定は管理画面から行い、例外的にスタイルを変えたい場合は挿入時に設定を変更しましょう。設定はデフォルトのままでも全く問題ありませんし、表示スタイルに特にこだわらなければ記事投稿画面でクイックタグをクリック⇒ソースコード入力⇒「挿入」をクリックするだけでOKです。とてもシンプルですよね。

以上、Crayon Syntax Highlighterの使い方についてでした。

スポンサーリンク

関連記事

  1. Wordpressのプラグインをインストールする3つの方法

    WordPress

    WordPressのプラグインをインストールする3つの方法

    WordPressにはさまざまなプラグインがあります。「記事に目次を表…

  2. Wordpress インポートした画像がメディアライブラリに表示されないときの対処法

    WordPress

    WordPress インポートした画像がメディアライブラリに表示されないときの対処法

    先日、テストサイトにWordPress管理画面からデータをインポートし…

  3. Wordpressのデータを初期化するプラグイン「WordPress Database Reset」の使い方

    WordPress

    WordPressのデータを初期化するプラグイン「WordPress Database Reset」…

    WordPressのデータをリセットしたいと思っても、記事や画像をひと…

  4. Wordpress カテゴリーの順番を並び替えるプラグイン「Category Order and Taxonomy Terms Order」の使い方

    WordPress

    WordPress カテゴリーの順番を並び替えるプラグイン「Category Order and T…

    WordPressにはカテゴリーの並べ替え機能が付いていないので、思っ…

  5. Wordpress リビジョンなどの不要データを削除するプラグイン「WP-Optimize」の使い方

    WordPress

    WordPress リビジョンなどの不要データを削除するプラグイン「WP-Optimize」の使い方…

    今回は、リビジョンなどの不要データを一括削除するプラグイン「WP-Op…

  6. Wordpressの記事にアドセンスを表示するプラグイン「WP QUADS」の使い方

    WordPress

    WordPressの記事にアドセンスを表示するプラグイン「WP QUADS」の使い方

    今回は、WordPressの記事にアドセンスを表示するプラグイン「WP…

PAGE TOP