2017/02/10
Crayon Syntax HighlighterでHTMLやCSSのコードをかっこよく紹介する方法
WordPress のカスタマイズ記事なんかを見て回ると、HTML や CSS を行番号つきで綺麗に表示しているブログをよく見かけますよね。
なんとか頑張れば CSS だけでも再現できますが、「Crayon Syntax Highlighter」というプラグインを使えば誰でも簡単にソースコードをかっこよく表示することができます。
インストールと設定方法、使用上の注意点を見ていきましょう。
Headline
Crayon Syntax Highlighter のインストールから設定まで
インストールと有効化
まずは、プラグインのインストールです。
上記公式サイトからダウンロードして FTP でアップロード、もしくは管理画面のプラグイン新規追加ページから検索してインストールしてください。
インストールが終わったら、忘れずに「有効化」しておきましょう。
設定画面
有効化すると管理画面の「設定」に「crayon」という項目が追加されるので、ここから設定画面にうつります。
初期設定のままでも十分使えまが、見栄えやフォントサイズを変更したいときは一番上の「テーマ」「フォント」「サイズ」を調整してください。
レスポンシブ Web デザインのテーマを使っているときは、サイズを固定するのではなく横幅の「最大」だけ指定しておくときれいに収まります。
まず使ってみて、表示を確認しながら調整するのが良いでしょう。
Crayon Syntax Highlighterの使い方
Crayonボタンの場所
プラグインをインストールすると、投稿画面のエディタに「crayon」ボタンが表示されます。
ビジュアルモードはちょっとわかりづらいですが、＜＞のマークです。
テキストモードでは「crayon」となっているのですぐわかりますね。
コードの書き方
では、実際にコードを書いてみましょう。
まず、ボタンを押して crayon ウィンドウを表示します。
「ここに、コードを記入して下さい」のエリアにコードを書き、右上の「挿入」ボタンを押せば記事内にコードが埋め込まれます。
コードを入れてみました。
「挿入」ボタンを押すと、エディタ上にコードがグレーの背景で表示されているのがわかると思います。
プレビューで確認すると、記事内に行番号つきでコードが表示されていますね。簡単！
コードを書いてからボタンを押してもOK
エディタにコードを書いておいて、コードを選択した状態で crayon ボタンを押しても同様に反映されます。
ざーっと記事を書いて、あとから整形するときはこちらのほうが良いかもしれませんね。
特定の行を強調する方法
カスタマイズ前後を紹介するときなど、特定の行を強調したいときは crayon ウィンドウ右上の「マークするライン」を使いましょう。
カンマで区切れば一行ずつ、ハイフンでつなげば複数行を指定できます。
プレビューで確認すると、2 行目の背景色が変わっていますね。
開始行の番号を任意の数字に変更する方法
通常は 1 から順番に行番号がふられますが、任意の番号に変更することもできます。
crayon ウィンドウの下に設定項目が並んでいるので、スクロールして「行」という項目を探してください。
「行番号の開始数字」を変更すると、その数字があたまになります。
CSS の○行目に追記してください！ という感じで使えますね。
表示速度が遅くなったときの対処法
Crayon Syntax Highlighter はコードをきれいに表示するプラグインのなかでは軽いほうですが、何も使っていないときと比べればやはり重くなります。
ブログ全体の体感速度が明らかに遅くなったときは、設定画面の「その他」で「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックを入れてみてください。
多少改善されると思いますが、プラグインやテーマによってまったく変わらないこともあります。
見た目をとるか、スピードをとるか… なかなか難しいところです。
どうしても重かったらhighlight.jsに切り替えよう
見た目もスピードも！ という欲張りさんには highlight.js がオススメです。
こちらはプラグインではないので header.php へコードを追加する必要があります。でもそれほど難しいカスタマイズではないので、以下の記事を参考にチャレンジしてみてください。
Naifix も重くなってきたので、切り替え検討中です。。。
まとめ
以上、Crayon Syntax Highlighter の使い方でした。
HTML や CSS だけではなくさまざまな言語に対応していますので、カスタマイズ記事をかっこよく見せたいときはぜひ使ってみてください。
少しでも見ばえのよいデザインで読者を惹きこみましょう！
それでは、また。
