2015/10/289 Shares

Crayon Syntax HighlighterでHTMLやCSSのコードをかっこよく紹介する方法

WordPress ソースコード

WordPress のカスタマイズ記事なんかを見て回ると、HTML や CSS を行番号つきで綺麗に表示しているブログをよく見かけますよね。

なんとか頑張れば CSS だけでも再現できますが、「Crayon Syntax Highlighter」というプラグインを使えば誰でも簡単にソースコードをかっこよく表示することができます。

インストールと設定方法、使用上の注意点を見ていきましょう。

Crayon Syntax Highlighter のインストールから設定まで

インストールと有効化

Crayon Syntax Highlighter
Crayon Syntax Highlighter

まずは、プラグインのインストールです。

上記公式サイトからダウンロードして FTP でアップロード、もしくは管理画面のプラグイン新規追加ページから検索してインストールしてください。

Crayon Syntax Highlighter インストール

インストールが終わったら、忘れずに「有効化」しておきましょう。

設定画面

有効化すると管理画面の「設定」に「crayon」という項目が追加されるので、ここから設定画面にうつります。

初期設定のままでも十分使えまが、見栄えやフォントサイズを変更したいときは一番上の「テーマ」「フォント」「サイズ」を調整してください。

Crayon Syntax Highlighter 設定画面

レスポンシブ Web デザインのテーマを使っているときは、サイズを固定するのではなく横幅の「最大」だけ指定しておくときれいに収まります。

まず使ってみて、表示を確認しながら調整するのが良いでしょう。

Crayon Syntax Highlighterの使い方

Crayonボタンの場所

プラグインをインストールすると、投稿画面のエディタに「crayon」ボタンが表示されます。

ビジュアルモードはちょっとわかりづらいですが、<>のマークです。

ビジュアルモードのcrayonボタン

テキストモードでは「crayon」となっているのですぐわかりますね。

テキストモードのcrayonボタン

コードの書き方

では、実際にコードを書いてみましょう。

まず、ボタンを押して crayon ウィンドウを表示します。

crayon でコードを書く

「ここに、コードを記入して下さい」のエリアにコードを書き、右上の「挿入」ボタンを押せば記事内にコードが埋め込まれます。

コードを入れてみました。

crayonでコードを書いてみたところ

「挿入」ボタンを押すと、エディタ上にコードがグレーの背景で表示されているのがわかると思います。

エディタ上のコード

プレビューで確認すると、記事内に行番号つきでコードが表示されていますね。簡単!

Crayon Syntax Highlighter表示サンプル

コードを書いてからボタンを押してもOK

エディタにコードを書いておいて、コードを選択した状態で crayon ボタンを押しても同様に反映されます。

先にコードを書いてからcrayonボタンでもOK

ざーっと記事を書いて、あとから整形するときはこちらのほうが良いかもしれませんね。

特定の行を強調する方法

カスタマイズ前後を紹介するときなど、特定の行を強調したいときは crayon ウィンドウ右上の「マークするライン」を使いましょう。

カンマで区切れば一行ずつ、ハイフンでつなげば複数行を指定できます。

crayonで強調したい行を指定する

プレビューで確認すると、2 行目の背景色が変わっていますね。

コードの強調

開始行の番号を任意の数字に変更する方法

通常は 1 から順番に行番号がふられますが、任意の番号に変更することもできます。

crayon ウィンドウの下に設定項目が並んでいるので、スクロールして「行」という項目を探してください。

「行番号の開始数字」を変更すると、その数字があたまになります。

コードの開始番号を変更する

CSS の○行目に追記してください! という感じで使えますね。

表示速度が遅くなったときの対処法

Crayon Syntax Highlighter はコードをきれいに表示するプラグインのなかでは軽いほうですが、何も使っていないときと比べればやはり重くなります。

ブログ全体の体感速度が明らかに遅くなったときは、設定画面の「その他」で「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックを入れてみてください。

その他の設定項目

多少改善されると思いますが、プラグインやテーマによってまったく変わらないこともあります。

見た目をとるか、スピードをとるか… なかなか難しいところです。

どうしても重かったらhighlight.jsに切り替えよう

見た目もスピードも! という欲張りさんには highlight.js がオススメです。

こちらはプラグインではないので header.php へコードを追加する必要があります。でもそれほど難しいカスタマイズではないので、以下の記事を参考にチャレンジしてみてください。

ソースコードを表示するにはhighlight.jsが軽量ですごくいい!Crayonとも互換性あり

Naifix も重くなってきたので、切り替え検討中です。。。

まとめ

以上、Crayon Syntax Highlighter の使い方でした。

HTML や CSS だけではなくさまざまな言語に対応していますので、カスタマイズ記事をかっこよく見せたいときはぜひ使ってみてください。

少しでも見ばえのよいデザインで読者を惹きこみましょう!

それでは、また。