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

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無料テーマまとめ12選

    WordPress

    日本国内のWordPress無料テーマまとめ12選

    Wordpressテーマを自分で作成するには、さまざまな知識が必要です…

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

    WordPress

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

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

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

    WordPress

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

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

  4. Wordpressのローカル環境(テスト環境)を 構築する

    WordPress

    WordPressのローカル環境(テスト環境)を 構築する

    WordPressのテーマをカスタマイズしたいなと思ったり、新しいプラ…

  5. WordPress ウィジェットを条件分岐で表示・非表示にするプラグイン「Widget Logic」の使い方

    WordPress

    WordPress ウィジェットを条件分岐で表示・非表示にするプラグイン「Widget Logic」…

    WordPressのウィジェットを、「スマホから見たときだけ表示させた…

  6. 確実&簡単!初心者でもできるWordPressのバックアップ方法

    WordPress

    確実&簡単!初心者でもできるWordPressのバックアップ方法

    WordPressのバックアップには、「BackWPup」などのプラグ…

PAGE TOP