HTMLやCSSのコードをオシャレに紹介するプラグイン「Crayon Syntax Highlighter」

皆さんはCSSやHTMLの知識はありますでしょうか。ワードプレスでブログを書いている方は一度は耳にしたことがある言葉なのではないでしょうか。

今回はそんなCSSやHTMLのコードをわかりやすく表示できて、見た目もオシャレに紹介することができるプラグインをご紹介します。


 

本日もiKouya.comをお読みいただきありがとうございます!Kouya(@4_kouya)です。

このブログでもいくつかCSSを紹介している記事があるのですが、他にもWordPressでCSSを紹介しているブログの記事を見ることはよくあると思います。いろいろなサイトを見ていると、HTML や CSS を行番号つきで綺麗に表示しているブログをよく見かけますよね。

今回は初心者でも簡単に利用することができて、かつオシャレにソースコードを紹介することができるプラグイン「Crayon Syntax Highlighter」をご紹介します。私のブログでもこちらを利用してソースコードを表示しています。簡単にできるのでオススメですよ。

 

Crayon Syntax Highlighterのインストール

スクリーンショット 2015-12-13 15.52.20

まずは「Crayon Syntax Highlighter」のインストールとプラグインの有効化を行いましょう。上記公式サイトからダウンロードしてアップロードするか、管理画面のプラグイン新規追加ページから検索してインストールしてください。

スクリーンショット 2015-12-13 15.53.12

プラグインのインストール方法について詳しくはこちらの記事を参考にしてみてください。「ワードプレスでプラグインを導入する方法を解説

 

設定画面から自分好みに調整

プラグインの有効化が完了したら設定画面から設定の変更を行いましょう。左側のタブの「設定」→「Crayon」の順にクリックします。

スクリーンショット 2015-12-13 16.03.22

 

設定画面が表示されますので自分好みに調整しましょう。変更したいときはテーマ・フォント・サイズを調整すればOKです。私の場合はカラフルで見やすかったので初期設定の状態で使用しています。

スクリーンショット 2015-12-13 16.04.55

 

Crayon Syntax Highlighterの使い方

Crayonボタンを使用する

設定が完了したら実際に使用してみましょう。プラグインをインストールすると、投稿画面のエディタに「crayon」ボタンが表示されます。

スクリーンショット 2015-12-13 16.16.18

ビジュアルモードでは「<>」のボタンが表示されます。

スクリーンショット 2015-12-13 16.16.28

ソースコードを挿入したいときはこのボタンをクリックすればOKです。

 

コードを記入する

それではソースコードを記入していきましょう。上記のcrayonボタンをクリックするとこちらの画面が表示されますので「ここに、コードを記入して下さい」と表示されている部分にコードを記入しましょう。記入が終わったら右上の「挿入」ボタンを押せば記事内にコードが埋め込まれます。

 

スクリーンショット 2015-12-13 16.11.54

 

挿入が終わったらプレビューで確認

挿入ができたらプレビューできちんと表示されているか確認してみましょう。以下の画面のような表示がされていればOKです。とても見やすくなりましたね。コピペもしやすい表示方法なので利用者にもありがたいですね。

スクリーンショット 2015-12-13 16.14.26

 

まとめ

以上、みやすくオシャレにソースコードを紹介することができるプラグイン「Crayon Syntax Highlighter」をご紹介しました。こちらのプラグインを導入するだけでソースコードの表示がオシャレになりますのでオススメです。利用も簡単なので是非試してみてください。

コメントを残す

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