エス技研WordPress専科

WordPressの基本的な使い方から SEOの対応、プラグイン情報、カスタマイズ方法を解説します。


highlight.jsの設定方法を解説。 Syntax Highlighterから乗換え、高速化にも最適

      2015/12/27

highlight.jsでシンタックスハイライトを高速化

 

highlight.jsとは

 
highlight.jsとは、下記のようにプログラムや HTMLなどのソースコードを見やすくに表示するシンタックスハイライトと呼ばれるライブラリの一つです。
 
20150430_wp_01
 
highlight.jsのオフィシャルサイトは以下にあります。
 https://highlightjs.org/
 
WordPressの場合は、Crayon Syntax Highlighterが有名で、現在(この記事を書いた時点)このエス技研ブログでも使用していて、「WordPressのCrayon Syntax Highlighterの使い方」と言う記事も書いています。
 
ですが、Crayon Syntax Highlighterは非常に処理が重いため、その代替案として highlight.jsについて検証を行いましたので、highlight.jsの使い方についての解説記事です。
 
 

highlight.jsの設置方法

 
highlight.jsの設置は非常に簡単です。
 
WordPressの場合は、ヘッダーテンプレートに下記の 3行を追加するだけです。
場所はどこでも構いませんが「</head>」の直前あたりに入れておきます。
 

 
ちなみに、ヘッダーテンプレートは、下記の場所にあります(テーマによって違う場合もありますが)。
 /wp-content/themes/{テーマ名}/header.php
 
 

highlight.jsを高速化させる設置方法

 
highlight.jsのソースコードを全て headタグの中に記述する方法でも問題なく動きますが、処理を高速化するには CSSをヘッダーに、JSをフッターに編集する方法があるようです。
 
具体的には、下記の CSSの設定だけ ヘッダーテンプレートに編集します。
 

 
そして、下記の jsと呼び出し処理をフッターテンプレートの「</body>」の前の行あたりに編集します。
 

 
ちなみに、フッターテンプレートは、下記の場所にあります(テーマによって違う場合もありますが)。
 /wp-content/themes/{テーマ名}/footer.php
 
 
ただ、Page Speed Insightsで確認をしたところ「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の内容は特に変化しておらず、もちろんスピードの変化もありませんでした。
この点については引き続き確認が必要かと思われます。
 
 

highlight.jsのソースコードの指定方法

 
highlight.jsを設定したら、次は、ハイライト処理をするソースコードを指定します。
 
ハイライトの指定したいソースコードを
 <pre><code> …… </code></pre>
で囲めば OKです。
 
ソースコードの言語指定は 1行目の「<code class="php">」の用に codeタグに指定をします。
指定しない場合は自動判別して適切なものをで設定してくれます。
 
 
具体的な設定方法は、「http://wordpress.s-giken.net/218」のページの一番最初にあるソースコードをサンプルとして、下記のように設定します。(pre、codeの閉じタグは全角「<」を使っています。)
 

 
そうすると、下記のように表示されます。
 
20150430_wp_02
 
ちなみに、Crayon Syntax Highlighterの場合は下記のような感じです。
 
20150430_wp_03
 
 

highlight.jsのデザインを変更する方法

 
デザインを変更する場合は、指定する CSSを変更します。
 

 
上記はヘッダーに記述する 1行目のソースコードですが、最後の「default.min.css」の部分がデザインを指定する部分です。
この部分を希望のデザインのものに変更します。
 
デザインは、下記のオフィシャルサイトのデモを見ながら希望のものを選びます。
 https://highlightjs.org/static/demo/
 
デモページの使い方は、「Styles」でデザインを選択します。
「Language categories」はハイライトされる言語毎の見え方を確認することが出来ます。
PHPは「common」のなかに分類されています。どこに分類されるか分からない場合は「all」の中から選ぶといいでしょう。
 
実際の CSSのファイル名は、下記の Githubにありますので、ファイル名だけをコピペします。
「default.min.css」の「.min.css」を省いた「default」の部分だけ取り替えます。
 https://github.com/isagalaev/highlight.js/tree/master/src/styles
 
 
hybrid.min.cssに指定を変更すると下記のように切り替わります。
20150430_wp_10
 
 

ハイライトの対象を変更する方法

 
highlight.jsのデフォルトは「<pre><code> …… </code></pre>」の部分がハイライトされます。
 
ですが、Crayon Syntax Highlighterから乗り替える場合は、「<pre> …… </pre>」の部分をハイライトする必要がありますので、ハイライトする対象を変更する必要があります。
 
変更するのは 3行目の下記の部分です。
<script>hljs.initHighlightingOnLoad();</script>
 
この部分を下記に変更します。

 
'pre'の部分を変更することで「pre」以外をハイライトの対象にすることも出来ます。
 
 

highlight.jsのソースが改行されてしまう場合

 
highlight.jsを設置して一つ問題になったこととしては、下記のようにソースコードが途中で改行されてしまう点です(テーマによってはデフォルトでも折り返しにならない場合もありますが)。
 
例えば「http://wordpress.s-giken.net/99」にある箇所です。
 
20150430_wp_05
 
Crayon Syntax Highlighterの場合は、下記のようにスクロールバーが表示されます。
20150430_wp_06
 
 
このような状況でスクロールを表示させる方法は、この highlight.jsの設定ではなく、もともとのテーマの CSSの設定を変更します。
 
「style.css」にある「word-wrap:break-word;」を「word-wrap: normal;」に修正します。
 
例えば、このエス技研ブログのテーマは「STINGER5」ですが、「style.css」の 23行目を以下のように修正します。
 
word-wrap: break-word;
      ↓ここを下記に修正
word-wrap: normal;

 
これで下記のようにスクロールが表示されるようになります。
20150430_wp_09
 
ちなみに、「style.css」は、下記の場所にあります(テーマによって違う場合もありますが)。
 /wp-content/themes/{テーマ名}/style.css
 
 

Crayon Syntax Highlighterからhighlight.jsに乗り替える!

 

highlight.jsに変更でスピード改善!

 
WordPressの表示スピードを高速化する方法の一つとして、プラグインを見直すというものがあります。
 
その方法として、「表示スピードアップに貢献!P3(Plugin Performance Profiler)で負荷が高いプラグインを調査」で記事を書きましたが、P3(Plugin Performance Profiler)と言うプラグインの負荷調査ツールを使って調査を行いました。
その結果、このエス技研ブログでは、Crayon Syntax Highlighterが圧倒的に表示スピードに悪影響を与えていることが分かりました。
 
と言うわけで、Crayon Syntax Highlighterの替わりになるものとして highlight.jsを試した内容がこの記事なのですが、実際にどれくらいのスピードが変わるのかを Page Speed Insightsで計測してみました。
 
20150430_wp_04
 
Crayon Syntax Highlighterを使っていた状態のものが「元」で、Crayon Syntax Highlighterを止めたものが「停止後」で、highlight.jsを実装したときが「highlight.jsを実装」の値です。
 
 http://wordpress.s-giken.net/
       元   停止後   highlight.jsを実装
  モバイル 61 →  65  →  65
  パソコン 74 →  78  →  78

 
 http://wordpress.s-giken.net/209
       元   停止後   highlight.jsを実装
  モバイル 58 →  66  →  66
  パソコン 75 →  79  →  79

 
エス技研ブログのトップページと、Crayon Syntax Highlighterを使っているページを計測してみましたが、明らかな影響があることが見て取れました。
これはさすがに何とかしないと問題が大きすぎますね。
 
 

highlight.jsに変更でスピード改善??

 
highlight.jsの実験を行った後日、同じように Google Code Prettifyと SyntaxHighlighterの実験を行いました。その記事は後日改めて紹介しますが、その際、改めて highlight.jsでのスピードテストを行いました。
その結果が以下となります。
 
 http://wordpress.s-giken.net/
       元   停止後   highlight.jsを実装
  モバイル 61 →  62  →  62
  パソコン 74 →  74  →  75

 
 http://wordpress.s-giken.net/209
       元   停止後   highlight.jsを実装
  モバイル 57 →  57  →  58
  パソコン 74 →  74  →  75

 
 http://wordpress.s-giken.net/218
       元   停止後   highlight.jsを実装
  モバイル 59 →  59  →  59
  パソコン 75 →  76  →  76

 
前回測ったときと比較して顕著な差があるとは見受けられませんでした。「Crayonを使っていても使っていなくても大した負荷になってない??」そんな内容でした。
ただ、Crayonを使っていないときは、いい値がでるときもあれば、ほぼ変わらない値がでるときもある。そんな内容でしたね。
 
 

HTMLのタグがそのまま処理されてしまう

 
Crayon Syntax Highlighterは、プログラムソースを記述すればそれをそのまま表示してくれますが、HTMLタグがそのまま処理されてしまいます。
 
20150430_wp_07
 
Crayon Syntax Highlighterの場合は、HTMLタグがタグとして処理されてしまいます。
20150430_wp_08
 
上記は 1行目だけ「<」を「&lt;」に変換しましたので表示されていますが、2行目以降はそのままのため HTMLのコメントとして処理され、表示されなくなっています。
同じように HTMLのタグや、PHPのコード(<?php ……)は全て実行されてしまいます。
 
これは highlight.jsがシンプルなシンタックスハイライトだからです。
Crayon Syntax Highlighterは自分で変更する必要はありませんでしたが、highlight.js軽量化のためそれらの処理は自分で対応する必要があり、「<」は「&lt;」と変更して編集していく必要があります。
 
highlight.jsは軽快に動作する替わりに編集するときには一手間が必要と言うことですね。
 
Crayon Syntax Highlighterから乗り替える場合は、投稿内のHTMLのタグや PHPのタグの記述を全て確認し、HTMLのタグや PHPのソースコードなどを一つ一つ修正していく必要がでてきます...
まぁ、そのついでに「<pre><code> …」のタグも修正していくといいのでしょうね。
 
実際問題としてこれを不具合が起こらないように対応するには腰を据えてやらないといけない作業なので、ソースコードを書いている投稿数が多いブログを書いている方はげんなりしてしまいますね...
(そんなわけで、私もこの記事を書いても今すぐに対応することは出来ませんでした。)
 
 

Crayon Syntax Highlighterと highlight.jsの比較のまとめ

 
一言で言うと、
highlight.jsはプログラムのソースコードに色を付けて見やすくする機能だけ。
Crayon Syntax Highlighterは編集する側、それを読む訪問者側の両方にとってより使いやすさを考慮した機能が盛りだくさん。
になっています。
 
その盛りだくさんの機能が Crayon Syntax Highlighterの処理スピードの遅さにつながっているワケなので、初めて使うシンタックスハイライトを選ぶなら highlight.jsを気軽に選べると思いますが、Crayonから乗り替える場合は二の足を踏む場合もあるかもしれないですね。
違う代替案を探したくなるかもしれないですね...私のように。
 
 

シンタックスハイライトの関連記事

 
シンタックスハイライトの乗り換えに当たって、複数のツールを試してみています。
そのまとめ記事として下記の記事を書いています。
 シンタックスハイライトの5システム比較のまとめ・WordPressでも使える
 
また、個別記事として下記の記事を書いています。
 WordPressのCrayon Syntax Highlighterの使い方
 SyntaxHighlighterの設定、カスタマイズ方法を解説。Crayonから乗換え、高速化にも最適
 Google Code Prettifyの設定方法を解説。 Syntax Highlighterから乗換え、高速化にも最適

 - WordPressのプラグイン

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload the CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

WordPressで口コミサイト構築ならMulti Ratingがおススメ

口コミの評価点を投稿する機能に特化。評価点を複数設定することができ、投稿後の評価点を編集することができる数少ないプラグイン。日本語にも対応。おススメ。

カスタムフィールド決定版!Advanced Custom Fields全項目完全解説・管理画面編

カスタムフィールドを設定する最高のプラグイン。設定できる項目を全て網羅して解説。投稿の項目だけではなく、カテゴリやユーザ情報の項目を増やすことにも使えます。

カスタムタクソノミーをCustom Post Type UIで設定し編集する方法解説

カスタムタクソノミーを追加、管理するプラグインCustom Post Type UIの使い方の解説。プラグインの解説ではあるものの、カスタムタクソノミーの仕様の解説でもある。

Google Code Prettifyの設定方法を解説。 Syntax Highlighterから乗換え、高速化にも最適

Google Code Prettifyでソースコードをきれいに編集する方法の解説。簡単設置とカスタマイズ設置の2つの方法を解説し、カスタマイズするポイントも解説。

WP Reviewを使ってWordPressのレビューサイトを構築

レビューサイトを構築するプラグインです。複数の評価者による評価点投稿やページごとに配色を変更する機能、機能満載なウィジェットなどレビューサイト構築に最適です。

ショートコードで簡単解決!WordPress固定ページにカテゴリ一覧を編集する方法

ショートコードを使って固定ページや投稿に特定のカテゴリ一覧を編集する処理を作りました。プラグインなしで30行くらいのソースコピペで実現できます!

WordPress・Contact Form7、MW WP Form共通 細かなデザイン調整方法

お問い合わせフォームプラグインの Contact Form7、MW WP Formにおけるラジオボタン、チェックボックスなどの見た目を調整する小技を紹介。

表示スピードアップに貢献!P3(Plugin Performance Profiler)で負荷が高いプラグインを調査

まずは正確に現状把握を!P3(Plugin Performance Profiler)を使ってプラグインの処理時間を確認!簡単操作で対応すべきプラグインが一目瞭然になります!

WordPressで WPtouchを入れたら「このウェブページにはリダイレクト ループが含まれています」と表示されてページが表示されなくなった

WPtouchを入れたら「このウェブページにはリダイレクト ループが含まれています」のエラーでページが表示されない。その解決法の解説です。

Advanced Custom Fieldsの関数の全部の使い方を調べてみた

Advanced Custom Fieldsに用意されている関数を全て調べてみた。よく使うget_field、the_field以外にも多くの関数が用意されていて、フォームを作成することも可能。