現在ホームページリニューアルに伴い、閲覧しづらい状態になっております。何卒ご了承ください。

記事内にソースコードを表示する『Crayon Syntax Highlighter』

「記事内にソースコードを記述したい場合、どうしたら綺麗に書くことができるのだろう?」

と思っているあなたに、Wordpressのプラグイン『Crayon Syntax Highlighter』をご紹介したいと思います。

— 2020/10/27 追記 —

『Crayon Syntax Highlighter』は数年前から更新されておらず、不具合が発生しているようです。代わりに『Highlighting Code Block』を使用していますが、使いやすいのでお勧めです。

目次

『Crayon Syntax Highlighter』をインストールしよう

『Crayon Syntax Highlighter』は、記事内にエディタ形式でソースコードを表示できるとても便利なプラグインです。

それでは、早速インストールしてみましょう!!

WordPressの管理画面からプラグインの新規追加を開き『Crayon Syntax Highlighter』を検索します。

Crayon Syntax Highlighter

こちらをインストールして、有効化します。

『Crayon Syntax Highlighter』で検索して見つからない場合は、公式サイト からダウンロードして、wp-content/pluginsディレクトリにインストールして利用することもできます。

『Crayon Syntax Highlighter』を使ってみよう

『Crayon Syntax Highlighter』のプラグインをインストールすると、投稿画面に下の画像の赤枠で囲んだ<>のマークが表示されるようになります。

Crayon Syntax Highlighter

<>マークをクリックして、crayonのウィンドウを開いてみましょう。

Crayon Syntax Highlighter
① Titleファイル名
② Language使用言語
③ Codeソースコード

① の『Title』に記述がないと、コードの知識があまりない方には分かりませんので、なるべく記述するようにしましょう。

④ の『Marked Lines』は、記述することで指定した行を強調することができます。

例えば、3行目を強調したいのであれば『3』と記入します。カンマで区切れば1行ずつ、ハイフンでつなげば複数行を指定できます。

Crayon Syntax Highlighter

上の画像では、1行目を強調したかったので『Marked Lines』に『1』と記述しました。背景がクリーム色になっていますね。

最後に ⑤ の『Add』をクリックしたら、完了です。

エディタをカスタマイズしてみよう

プラグインを有効化すると、Wordpressの管理画面の『設定』に『Crayon』という項目が追加されますので、そちらをクリックします。

私の場合は、下の画像の赤枠で囲んだ『Theme』と『Font』と『Toolbar』を変えて使っています。

水色の枠で囲んだ『Enable Live Preview』に を入れると、プレビュー画面が見られるようになります。

Crayon Syntax Highlighter

Theme』をいくつかご紹介しますと・・・

crayon-thema
crayon-thema
crayon-thema

初期設定のままでも充分使えますが、あなたのサイトに合わせてカスタマイズしてみてくださいね。

表示速度が遅くなってしまったら?

ブログの表示速度が遅くなってしまったら、Wordpressの管理画面 > 設定 > Crayon を開き、『Misc』の赤枠で囲まれた部分に を入れましょう。

こちらには『必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる』と書かれています。

ただし、チェックを入れても、表示速度があまり変わらないこともあるようです。

まとめ

今回は、記事内にエディタ形式でソースコードを表示するプラグイン『Crayon Syntax Highlighter』をご紹介しました。

私もこちらのプラグインを取り入れてから、ソースコードの記述がとても楽になりました。

ぜひ、あなたもお試しください。

よかったらシェアしてね!
目次
閉じる