ブログ記事にHTMLやCSSソースコードをキレイに表示するWPプラグイン「Crayon Syntax Highlighter」

 
Crayon Syntax Highlighter

ブログ記事に、下の画像のようにソースコードをキレイに表示できるWordPressプラグイン「Crayon Syntax Highlighter」を紹介します。

 

ソースコードは直接記事へ記入もできますが、見た目が非常に悪い。逆にキレイに表示することで、コピー&ペーストが非常に簡単ですし、なにより読者に優しい記事になりますよね。

 

ソースコードは、ひとつ記号を間違えるだけで大変なことになりますから。私も過去にミスをして、何時間も修正に時間を費やしたことがあります。

 

今回はWordPressプラグイン「Crayon Syntax Highlighter」のインストール方法と、設定方法を詳しく解説していきますので、ぜひ参考にしてください。

 

Sponsored Link

WordPressプラグイン「Crayon Syntax Highlighter」インストール

1.プラグインから新規追加をクリック。

 

2.プラグイン検索のキーワード枠へ「Crayon Syntax Highlighter」と入力。すると、プラグインが表示されますのでインストールします。「有効化」も忘れずに。

 

「Crayon Syntax Highlighter」設定方法

1.投稿ページを「テキスト」モードに切り替えて、『Crayon』をクリックします。

 

2.ソースコード入力画面に移ります。

タイトル:コード表示枠左上へタイトル名を表示できる。
コード:表示させたいソースコードを記入。

 

ソースコードのみをキレイに表示させるだけであれば、この2箇所だけの設定でOK。タイトルには、ソースコードを貼る場所を示す「single.php」や、さらに詳しく「●●テーマの13より挿入」などのタイトルを入れておくと、より読者に分かりやすく伝わりますよね。

 

この2箇所へ入力したら、「追加」をクリックします。

 

3.実際に表示を確認

タイトルへ「single.php」と入力。コードへは表示したいソースコードを入力した画面です。

注意!プレビューでは確認できないので、記事を「非公開」にして「更新」してから、サイトを表示しましょう。

 

4.記事表示プレビュー

投稿画面では、このような表示ですが・・・実際に公開した表示では・・・

このようにキレイに表示されます。ね!簡単でしょ!

 

5.その他細かい設定も可能

これだけの設定が可能。ブログ背景色やテーマなどでオリジナルな表示カスタムができるのは、すごくうれしい機能ですよね。

 

ただ、あくまで「見やすい」「コピペしやすい」という2点を前提としたカスタムにすることをおすすめします。

 

ではではまた使えるプラグインを紹介しますのでお楽しみに(=^ー^)ノ

Sponsored Link

 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

- Comments -

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

CAPTCHA