WordPressでHTML,CSS,PHP,JavaScriptなどのソースを綺麗に表示する

公開:2016-03-15 / WordPress 制作・開発 / , , , , ,
更新:2017-02-07

HTML,CSS,PHP,JavaScriptなどのソースを以下の画面キャプチャのように表示しているサイトをみたことはありませんでしょうか。

Crayon Syntax Highlighterのソース表示

 

WordPressは、デフォルトのままで投稿画面にソースを記述しても

 

<?php
echo “こんにちは”;
?>

 

のように普通に表示されてしまいます。

(PHPであればexce-phpというプラグインを利用すると実行してくれます。興味のある方はコチラをどうぞ)

 

この表示だととても見づらいですが、WordPressには、ソースコードを綺麗に表示する「Crayon Syntax Highlighter」というプラグインが存在します。

 

本ブログでもソースコードと合わせて紹介する記事が増えてきたので、これを機に導入してみましたところ、思いのほか簡単だったのでもっと早く使っていればよかったと後悔しております。。。

 

そんなわけで本日は 「Crayon Syntax Highlighter」を紹介したいと思います。

 

Crayon Syntax Highlighterのインストールから使い方まで

WordPress管理画面の左メニューのプラグインから、「プラグインを追加」の画面の検索フィールドに「Crayon Syntax Highlighter」と入力して検索し、該当プラグインのインストールボタンをクリックします。

Crayon Syntax Highlighterの選択

 

インストールが完了したら「プラグインを有効化」をクリックします。

Crayon Syntax Highlighterのインストール

 

有効が成功したら、以下のメッセージが表示されます。

Crayon Syntax Highlighterの有効化

 

左メニューの「設定」から「Crayon」をクリックします。

Crayon Syntax Highlighterの設定画面のリンク

 

テーマやフォント、サイズなどが指定できるので 自サイトにマッチするよう調整を行い。「変更を保存」ボタンをクリックします。(ちなみに本サイトではデフォルトのままです)

Crayon Syntax Highlighterの設定画面

 

これで、設定が完了しました。

早速使ってみます。

 

いつものようにテストサイト(penguinweb.net)にて記事を作っていますので、実際のサイトをご覧になりたい方はコチラを参考にしてください。

 

記事投稿画面の挿入したい場所にカーソルがある状態で、テキストモードの状態で「Crayon」ボタンをクリックします。

Crayon Syntax Highlighterの使い方

 

すると、オーバーレイで、ソース入力画面が立ち上がります。必要な項目を入力して画面右上の「挿入」ボタンをクリックします。(本サイトでは、プログラム言語ソースの項目以外は空です)

Crayon Syntax Highlighterでソースの挿入

 

ここではプログラム言語をPHPとしています。

 

すると、投稿画面に先ほど入力したソースにpreタグとclassが入った状態で挿入されます。

ここで、特殊文字「>」が「&gt;」になっていますが、classにある「lang:php decode:true」のとおり、表示されるときはデコードされますのでご安心ください。

Crayon Syntax Highlighterの挿入後

 

投稿内容に問題がなければ「公開」をクリックして表示を確認してみましょう。

Crayon Syntax Highlighterの反映

 

意図通りに表示されていることがわかります。

 

最後に

ソースコードを綺麗に表示するプラグインとして有名なのは「SyntaxHighlighter Evolved」かと思います。

 

このプラグインは「Crayon Syntax Highlighter」と比べると、機能が少ないです。

大きなところでいうとテーマの量やフォントが少ないです。

 

個人的には「Crayon Syntax Highlighter」の方がカスタマイズの自由度は高いので、こちらを使うことにしました。

 

WordPressはプラグインが豊富ですが、同じような機能の場合は選定に時間がかかるのが最近の悩みの種です。。。

 

Author:yukio iizuka
プロフィール画像
フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com
mislead
MISLEADの記事に共感いただけましたら
いいねをお願いします。

コメント一覧

コメントはありません

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください



       

© yukio iizuka All Rights Reserved...