記事にソースコードを表示！WordPressプラグイン【Crayon Syntax Highlighter】

ブログの投稿記事にソースコードを表示させたい時、他のブログでよく見るエディタのような表示ができたらいいなぁって思いませんか？

ということで、いろんな方法があるんですが、今回は簡単できれいに表示ができる「Crayon Syntax Highlighter」というプラグインを紹介します。

 

Crayon Syntax Highlighterについて

 

デザインをカスタマイズする際に必要となるソースコードをブログの記事内に表示させるプラグインです。

このプラグインを使うとHTML、CSS、PHPやJavaScriptなど46種類の言語に対応していて、とても見やすくきれいに表示できます。

ブログでHTML,CSSなどを説明するのに最適で、多くの方が利用しているプラグインです。

便利なので、ぜひ活用してみてください。

 

ソースコードとは

 

ここで、よく聞くソースコードについて簡単に説明しておきますね。

ソースコードとは、簡潔に言えば「コンピュータを動かすための文字列」となります。

WordPressで自分のブログをカスタマイズする際に必ずお世話になるもので、すべて半角文字の英語で記述されています。

↑このように、よくブログで表示されていますね。

上記のようにソースコードをきれいに、分かりやすく表示してくれるのが「Crayon Syntax Highlighter」というプラグインなんです。

ソースコードを記事内で取り扱いたい人にはお勧めのプラグインです。

 

Crayon Syntax Highlighterの導入

 

まず、Wordpress管理画面からプラグインから新規追加をクリックします。

 

 

キーワードに「Crayon Syntax Highlighter」と入力。

「今すぐインストール」して「有効化」します。

 

 

「有効化」するとサイドバーの設定の欄にCrayon が追加されています。

 

Crayon Syntax Highlighterの設定

 

設定については、ほとんどデフォルトのままでいいのですが、ここはこうしておいたほうが良いという点だけ説明しておきます。

「ツールバーの表示」はマウスオーバーと常に表示が選択できますが、ここはユーザー的に考えて「常に表示」が良いと思います。

 

 

次に、「常にスクロールバーを表示」にチェックを入れましょう。

ソースコードが長くなった場合に見えない部分ができるので、スクロールバーを常に表示させているほうがユーザーに対して親切ですね。

 

 

この部分については特に必要ないですが、「Crayon Syntax Highlighter」が英語表記になっている場合があるので、日本語表記の設定画面を載せておきます。

参考にしてください。

設定を変更した場合は「変更を保存」をクリックするのを忘れずに。

スポンサーサイト

 

ソースコードの挿入方法

 

いよいよ、記事内にソースコードを挿入してみましょう。

 

ソースコードを表示したい記事の「テキスト」を開けます。

本文の上にある「Crayon 」をクリックします。

 

 

すると「挿入画面」ウィンドウが表示されます。

 

 

コード欄にソースコードを記入するかコピペします。

右上にある「挿入」をクリックします。

これで完了です。

 

プレビュー画面で確認するとページ内に、このように表示されていると思います。

以上が「Crayon Syntax Highlighter」の使い方です。

 

Crayon Syntax Highlighterが英語表記されている

 

最近Crayon Syntax Highlighterが英語表記になっているというのをよく聞きます。

Crayon Syntax Highlighterを日本語表記にする方法はあるのですが、度々Wordpressの更新が行われるので、その都度やり直さなければならないので、少し面倒ですよね。

ここで日本語表記の設定画面を載せているので、これを見ながら一度設定してみてください。

一度設定すれば、何度もやり直すようなことは、あまりないと思われます。

 

まとめ

 

色んな設定項目がありますが、実際に使用する設定は非常に少ないです。

WordPressの記事内にソースコードを表示する場合「Crayon Syntax Highlighter」は非常に簡単に使えるので一度使ってみてください。

ここまでお疲れ様でした。