記事内にソースコードを表示するプラグイン「Crayon Syntax Highlighter」

3230719366_e2b36e8d03_z
以前から記事内にソースコードを表示させたかったのでできる方法がないかなと模索していたところいいプラグインがありました。

記事内にも書ける事は書けるのですが、どこからどこまでがソースコードかわかりずらいというのもあるししっかり綺麗にまとめて表示された方がいいですよね。

その記事内に綺麗なソースコードを表示してくれるためのプラグインが「Crayon Syntax Highlighter」です
photo by Evonne

SPONSORED LINK

▼この記事の目次

「Crayon Syntax Highlighter」について&インストール

このプラグインについては重いだとか軽いだとか賛否両論ありますがなるべく軽く使用するための設定も方法があれば紹介したいと思います。

WordPress管理画面から「プラグイン」→「新規追加」を選択し検索枠に「Crayon Syntax Highlighter」と入力し検索します。

出てきたら「今すぐインストール」→「有効化」をクリック。

Crayon Syntax Highlighter1a

「Crayon Syntax Highlighter」の使い方

使い方はデフォルトのままでも使えるので簡単です。

インストール後に「有効化」すればすぐに記事の編集のテキストエディタに「crayon」が追加されています。
実際に使ってみましょう。

記事内に表示させたいコードを「テキストエディタ」の方に書き選択状態にして「crayon」をクリックします。

Crayon Syntax Highlighter3a

そうするとポップアップされるので表示される内容を確認し上の「挿入」を選択すればOKです。

Crayon Syntax Highlighter4a
このように表示されました。

Crayon Syntax Highlighter5

「Crayon Syntax Highlighter」の設定方法

デフォルトのままでも十分使えますが、使いやすいようにあと重いならできるだけ軽くカスタマイズしてみます。

「設定」の中に新しく「Crayon」の項目が出来ているので管理メニューの「設定」→「Crayon」を選択します。
この画面から設定していきます。

↓この部分は軽くするために設定することをお勧めします

・「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」
ここを有効にすると「Crayon Syntax Highlighter」を設置していないページではCSSとJavaScriptを読み込まないようにする。

他にめちゃログでは本格的なソースコードを書くわけではないので負荷になりそうだと思われる機能の部分はできるだけ外しました。

この辺りと

Crayon Syntax Highlighter6a
この辺りと
Crayon Syntax Highlighter10a

この辺りをいくつか変更しました。

Crayon Syntax Highlighter7a

設定前と設定後の負荷を比較する

「変更を保存」してプラグインの負荷の割合を測定するプラグイン「P3(Plugin Performance Profiler)」を使い設定前と設定後を比較しました。

別記事 : 使用しているプラグインの負荷の割合を測定する方法
↓こちらが設定前の「Crayon Syntax Highlighter」の負荷の割合。
「Crayon Syntax Highlighter」負荷」…14%

p3-5c
↓こちらが設定後の「Crayon Syntax Highlighter」の負荷の割合。
「Crayon Syntax Highlighter」負荷」… 9%~11%(数回測定)

Crayon Syntax Highlighter9a

・「1.510→1.169」になった部分がプラグインのロード時間
・「78%→約75%~77.3%(数回測定)」になった部分がプラグインのページ読み込みに占める割合

になります。

読み込みにかかる時間がかなり改善されました。

P3のグラフや数字を見る限りは設定前と設定後と比較して負荷が軽くなり違いが出ました。

設定項目が多くやや面倒ですが「Crayon Syntax Highlighter」を使う場合は設定してから使うといいようです。

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!