【WordPress】記事内にコードを綺麗に挿入するプラグイン 「Crayon Syntax Highlighter」

Tweet

Pocket

ソースコードを記事内に綺麗に挿入できるというプラグイン、「Crayon Syntax Highlighter」を使用してみました。非常に使いやすく、見た目も読みやすく、コピー機能も備わっているのでおススメできるプラグインだと思います。

Crayon Syntax Highlighterの使い方

WordPressにログインし、ダッシュボードから「プラグイン」→「新規追加」を選択します。

「Crayon Syntax Highlighter」を検索し、インストールします。
インストールが完了したら有効化します。

「Crayon Syntax Highlighter」を有効化していると、記事作成のテキストエディタに「crayon」が追加されているのでクリックします。

このような画面が開くので各項目を設定していきます。

①Title
挿入するソースコードのタイトルを設定します。必須ではないのですが、なんのソースコードなのか分かるように設定しておいたほうがいいでしょう。

②Language
「使用言語」を設定します。ほぼすべての言語が選択できるので、挿入するコードがなんの言語か明確にします。

③Cade
挿入するコードを記載します。

④Add
上記三つの項目を設定すれば必要な設定は終わりです（必須ではありませんが）。Addを押すと、記事内にソースコードが挿入されます。

このように記事内にソースコードが挿入されました。プロパティや値、タグの先頭や閉じタグなどが色で区別されているのでとても見えやすいですね(#^^#)

「Crayon Syntax Highlighter」のそのほかの機能

①Inline：行数表示を消し、文章のように記事中にコードを羅列させる機能。
②Don’t Highlight：htmlのclass,id,URLなどパーツごとにデフォルトで色分けしている機能をOFFにして全文を黒文字で表示する機能。
③Line Range：Code欄に書かれたコードのうち、指定の行数だけを表示する。
④Marked Lines：指定した行数だけをマーカーで強調する。
⑤URL：リンク先のソースコードを全文表示する機能。

このような機能もありますので、必要に応じて使用していきましょう。

エディタのフォントと色を変えてみる

サイトによっては初期設定のままでは見えづらかったりする場合があります。そんな時は自分のサイトにあうテーマとフォントを探して設定しましょう。設定方法もすごく簡単です。

エディタから「Settings」欄より「Theme」と「Font」を選ぶだけです。赤枠で囲ってある箇所を変更するだけですね。色々試してみて、ご自身のブログにあう設定を探してみましょう。

「Crayon Syntax Highlighter」の注意点

最近になって「Crayon Syntax Highlighter」に致命的なエラーが発生するようになりました。それはPHPのバージョンアップに伴い発生するもののようで、「Crayon Syntax Highlighter」を使用していた人のブログのデザインや機能が崩れることが多発したようです。
もしもこの「Crayon Syntax Highlighter」というプラグインを有効化した際に、異常が見られた場合はすぐに停止し、こちらの記事を参考にして、エラーを修正して頂けたらと思います。

【WordPress】Crayon Syntax Highlighterの致命的エラー修復について

それでは今回はここまでです。お疲れ様でした(・ω・)ノシ