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

 

Crayon Syntax Highlighterとは

 

 

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

 

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

 

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

 

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

 

 

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

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

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

めがね
インストール時のバージョンは、2.8.4でした。

 

 

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

 

基本設定

 

 

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

 

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

 

めがね

設定画面は英語表記なので読みにくい場合には、マウスを右クリックして「日本語に翻訳」をクリックします。

 

 

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

 

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

 

文字化け対策

 

 

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

 

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

 

コードの挿入方法

 

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

 

 

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

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

 

 

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

 

 

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

 

 

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

 

ヒッキー
コードが表示されとる。

 

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

 

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

 

ワードプレスのプラグイン設定の話

ワードプレスのプラグイン設定の話

ワードプレスでサイトやブログをするなら、必ず「プラグイン」という機能を使うと思う。そもそも、プラグインというツールは何なのか。プラグインは、WordPressの...

投稿 2017/02/16