Crayon Syntax Highlighterの設定方法と使い方（ソースコードを表示するプラグイン）

 

ここでは、Crayon Syntax Highlighterの設定方法と使い方（ソースコードを表示するプラグイン）について紹介する。

 

Crayon Syntax Highlighterとは

 

 

Crayon Syntax Highlighterとは、ソースコードをブログ（サイト）などで表示する際に使用するプラグインである。

 

ソースコードをブログ（サイト）などに貼ろうとすると、通常だと様々な弊害が起きるために、このプラグインを使用する必要があるわけである。

 

Crayon Syntax Highlighterの設定方法と使い方

 

Crayon Syntax Highlighterの設定方法としては、管理画面（ダッシュボード）から、「プラグイン」、「新規追加」へと進む。

 

 

そうしたら、画面が「プラグインを追加」に切り替わる。

右側にあるキーワードの検索欄に「Crayon Syntax Highlighter」と入力する。

入力後は、Crayon Syntax Highlighterの項目が画面に表示されるので、そこにある「今すぐインストール」ボタンをクリックする。

 

 

インストール後は、「有効化」ボタンをクリックする。

 

基本設定

 

 

で、基本設定を行う場合には、管理画面（ダッシュボード）から、「設定」へと進み、「Crayon」をクリックする。

 

すると設定画面に移動できる。

 

めがね

 

 

設定については、そこまでこだわりがない、という方は、デフォルト設定でも良いかもしれない。

 

ただ、このままの設定だとコードを挿入した後で、文字化けすることがたまにあるので、文字化け対策をしておくと良いと思う。

 

文字化け対策

 

 

文字化け対策をするには、コードの項目にある「コード内のHTMLエンティティをデコードする」にチェックを入れる。

 

そして、「変更内容を保存」ボタンをクリックすればOKである。

 

コードの挿入方法

 

で、設定が終わったら、さっそくコードの挿入を行おう。

 

 

コードの挿入は記事ページにて、ビジュアルエディタにある「＜＞」をクリックする。

（テキスト画面でも、もちろん同様に挿入できる）

 

 

赤枠の中に、記事ページに挿入したいコードを追加する。

 

 

コードを追加後は、「Add」をクリックする。

 

 

これで、ビジュアル画面にコードが挿入される。

 

 

プレビュー画面にて、確認するとこのように表示される。

 

以上で、Crayon Syntax Highlighterの設定方法と使い方（ソースコードを表示するプラグイン）についての解説は終了する。