Crayon Syntax Highlighterで記事内に綺麗なソースコードを表示させる方法

Crayon Syntax Highlighterで記事内に綺麗なソースコードを表示させる方法

ブログのカスタマイズ方法などを解説するとき、ユーザーが分かりやすいように記事内にソースコードを表示させたいと思ったことはないでしょうか?

WordPressブログで記事内にソースコードを書き込む場合、そのまま入力するとコードが見にくかったり、エラーが出てしまうということも少なくありません。

そんな時に役に立つのが、プラグイン「Crayon Syntax Highlighter」です。
これを使えば、テキストエディタで表示されるような綺麗で見やすいソースコードを、記事内に簡単に埋め込むことができます。

こんな感じで、簡単に綺麗なソースコードが表示できます↓

 
 
プログラミングのコーディングなどを解説する機会の多い方は、ぜひ参考にしてみてください。
 
 

スポンサーリンク

「Crayon Syntax Highlighter」をインストール

まず、Crayon Syntax Highlighterをインストールします。
WordPressの管理画面から『プラグイン新規追加』という順にクリックして進み、
プラグイン検索ページで「Crayon Syntax Highlighter」と検索します。

するとCrayon Syntax Highlighterのプラグインがヒットしますので、
これを『今すぐインストール』し、有効化すればOKです。

プラグインのインストール方法を詳しく知りたい方は、こちらの記事も参考にしてみてください。

参考記事:プラグインのインストール方法
 
 

Crayon Syntax Highlighterの設定

プラグインをインストール後、Wordpressで『設定Crayon』という順にクリックして進み、
「Crayon Syntax Highlighter」の設定画面を開きます。

ここではデザインやサイズ、表示方法など様々な設定を行うことができ、自分好みにカスタマイズしたソースコードを作成することができます。プレビューで確認しながら、自分のサイトに一番しっくりくるデザインで作成しましょう。

特にこだわりのない人はデフォルト設定のままでも十分OKです。

Crayon Syntax Highlighterの設定画面
 
 
設定後は、設定画面下部の『変更を保存』ボタンをクリック。

『変更を保存』ボタンをクリック
 
 

スポンサーリンク

Crayon Syntax Highlighterの使い方

テキストエディタに『Crayon』というボタン(ビジュアルでは『< >』ボタン)が追加されているのでこれをクリック。

『Crayon』ボタンをクリック
 
 
コードを記入するウィンドウが開きます。

コードを記入するウィンドウ
 
 
ここでは、基本的に以下の項目を設定できます。
 
 
・タイトル(任意)
コードの内容についてタイトルを付けることができます。
 
 
・プログラム言語(任意)
選択するとツールバーにプログラム言語が表示されます。
 
 
・コード(必須)
表示したいコードを記入します。
 
 
[コード]の欄にコードを記入したら、ウィンドウ右上『挿入』をクリックしましょう。

『挿入』をクリック
 
 
これで、記事の中にソースコードが埋め込まれます。

 
 
使い方はたったこれだけです。
すごく簡単ですね。
 
 

まとめ

今回は、プラグイン「Crayon Syntax Highlighter」を使って、記事内に綺麗なソースコードを埋め込む方法を解説しました。

プログラミングのコーディングを解説するブログなどでは、ゴチャッとした複雑なコードの記述が多い分、より見やすくて分かりやすいページ作りが求められます。

Crayon Syntax Highlighterを使えば、簡単に綺麗で見やすいソースコードを埋め込むことができますので、これを活用して他サイトとの差をつけましょう!
また、ユーザビリティを高めるためにもぜひ取り入れていただきたいプラグインです。
 
 

スポンサーリンク








Crayon Syntax Highlighterで記事内に綺麗なソースコードを表示させる方法