highlight.jsの設定方法を解説。 Syntax Highlighterから乗換え、高速化にも最適
2017/03/09
highlight.jsでシンタックスハイライトを高速化
highlight.jsとは
highlight.jsとは、下記のようにプログラムや HTMLなどのソースコードを見やすくに表示するシンタックスハイライトと呼ばれるライブラリの一つです。
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>」の直前あたりに入れておきます。
1 2 3 |
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css"/> <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> |
ちなみに、ヘッダーテンプレートは、下記の場所にあります(テーマによって違う場合もありますが)。
/wp-content/themes/{テーマ名}/header.php
highlight.jsを高速化させる設置方法
highlight.jsのソースコードを全て headタグの中に記述する方法でも問題なく動きますが、処理を高速化するには CSSをヘッダーに、JSをフッターに編集する方法があるようです。
具体的には、下記の CSSの設定だけ ヘッダーテンプレートに編集します。
1 |
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css"/> |
そして、下記の jsと呼び出し処理をフッターテンプレートの「</body>」の前の行あたりに編集します。
1 2 |
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> |
ちなみに、フッターテンプレートは、下記の場所にあります(テーマによって違う場合もありますが)。
/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://blog.s-giken.net/218.html」のページの一番最初にあるソースコードをサンプルとして、下記のように設定します。(pre、codeの閉じタグは全角「<」を使っています。)
1 2 3 4 5 6 7 8 |
<pre><code class="php"> function action() { parent::action(); $this->prev_page = $this->objNavi->arrPagenavi[before]; $this->next_page = $this->objNavi->arrPagenavi[next]; } </code></pre> |
そうすると、下記のように表示されます。
ちなみに、Crayon Syntax Highlighterの場合は下記のような感じです。
highlight.jsのデザインを変更する方法
デザインを変更する場合は、指定する CSSを変更します。
1 |
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.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に指定を変更すると下記のように切り替わります。
ハイライトの対象を変更する方法
highlight.jsのデフォルトは「<pre><code> …… </code></pre>」の部分がハイライトされます。
ですが、Crayon Syntax Highlighterから乗り替える場合は、「<pre> …… </pre>」の部分をハイライトする必要がありますので、ハイライトする対象を変更する必要があります。
変更するのは 3行目の下記の部分です。
<script>hljs.initHighlightingOnLoad();</script>
この部分を下記に変更します。
1 2 3 4 5 6 7 |
<script> $(document).ready(function() { $('pre').each(function(i, block) { hljs.highlightBlock(block); }); }); </script> |
'pre'
の部分を変更することで「pre」以外をハイライトの対象にすることも出来ます。
highlight.jsのソースが改行されてしまう場合
highlight.jsを設置して一つ問題になったこととしては、下記のようにソースコードが途中で改行されてしまう点です(テーマによってはデフォルトでも折り返しにならない場合もありますが)。
例えば「http://blog.s-giken.net/99.html」にある箇所です。
Crayon Syntax Highlighterの場合は、下記のようにスクロールバーが表示されます。
このような状況でスクロールを表示させる方法は、この highlight.jsの設定ではなく、もともとのテーマの CSSの設定を変更します。
「style.css」にある「word-wrap:break-word;」を「word-wrap: normal;」に修正します。
例えば、このエス技研ブログのテーマは「STINGER5」ですが、「style.css」の 23行目を以下のように修正します。
word-wrap: break-word;
↓ここを下記に修正
word-wrap: normal;
これで下記のようにスクロールが表示されるようになります。
ちなみに、「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で計測してみました。
Crayon Syntax Highlighterを使っていた状態のものが「元」で、Crayon Syntax Highlighterを止めたものが「停止後」で、highlight.jsを実装したときが「highlight.jsを実装」の値です。
http://blog.s-giken.net/
元 停止後 highlight.jsを実装
モバイル 61 → 65 → 65
パソコン 74 → 78 → 78
http://blog.s-giken.net/209.html
元 停止後 highlight.jsを実装
モバイル 58 → 66 → 66
パソコン 75 → 79 → 79
エス技研ブログのトップページと、Crayon Syntax Highlighterを使っているページを計測してみましたが、明らかな影響があることが見て取れました。
これはさすがに何とかしないと問題が大きすぎますね。
highlight.jsに変更でスピード改善??
highlight.jsの実験を行った後日、同じように Google Code Prettifyと SyntaxHighlighterの実験を行いました。その記事は後日改めて紹介しますが、その際、改めて highlight.jsでのスピードテストを行いました。
その結果が以下となります。
http://blog.s-giken.net/
元 停止後 highlight.jsを実装
モバイル 61 → 62 → 62
パソコン 74 → 74 → 75
http://blog.s-giken.net/209.html
元 停止後 highlight.jsを実装
モバイル 57 → 57 → 58
パソコン 74 → 74 → 75
http://blog.s-giken.net/218.html
元 停止後 highlight.jsを実装
モバイル 59 → 59 → 59
パソコン 75 → 76 → 76
前回測ったときと比較して顕著な差があるとは見受けられませんでした。「Crayonを使っていても使っていなくても大した負荷になってない??」そんな内容でした。
ただ、Crayonを使っていないときは、いい値がでるときもあれば、ほぼ変わらない値がでるときもある。そんな内容でしたね。
HTMLのタグがそのまま処理されてしまう
Crayon Syntax Highlighterは、プログラムソースを記述すればそれをそのまま表示してくれますが、HTMLタグがそのまま処理されてしまいます。
Crayon Syntax Highlighterの場合は、HTMLタグがタグとして処理されてしまいます。
上記は 1行目だけ「<」を「<」に変換しましたので表示されていますが、2行目以降はそのままのため HTMLのコメントとして処理され、表示されなくなっています。
同じように HTMLのタグや、PHPのコード(<?php ……)は全て実行されてしまいます。
これは highlight.jsがシンプルなシンタックスハイライトだからです。
Crayon Syntax Highlighterは自分で変更する必要はありませんでしたが、highlight.js軽量化のためそれらの処理は自分で対応する必要があり、「<」は「<」と変更して編集していく必要があります。
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から乗換え、高速化にも最適
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!
関連記事
-
WordPressの記事編集で文字が自動変換される要注意な文字列
記事を編集する際、入力した文字とは違う表示のされ方をする文字、アポストロフィ、ダブルクォート、円マーク、三点リーダ(…)など、その解説と対応方法です。
-
WordPressのカスタムフィールド、カスタム投稿、カスタムタクソノミーとは?
WordPressのカスタムフィールド、カスタム投稿、カスタムタクソノミーの基本的な内容を解説。お薦めのプラグインと編集方法も解説しサンプルソースなども紹介。
-
get_categories、get_termsでカテゴリとタクソノミーのターム一覧の編集方法
get_categories()関数やget_terms()関数を使ってタクソノミーのタームを取得し検索処理の部品を作るプログラム作りその解説をしています。
-
タクソノミーの一覧をショートコードで編集・ソート機能付き・wp_list_categories
カスタムタクソノミーのターム一覧をショートコードで編集する方法の解説です。Category Order and Taxonomy Terms Orderを利用してソート機能を追加したバージョンです。
-
BackWPupでバックアップ・Jobの設定・保存する情報の設定
BackWPupその2。Jobのバックアップの基本部分と対象の設定についての解説。
-
WordPress初心者向け フォルダ構成・データベース構成解説
BackWPupその11。バックアップを取るために必要なファイル、データベースの解説をします。
-
Advanced Custom Fields(ACF)のアドオン・繰り返しフィールドの使い方解説
Advanced Custom Fieldsのアドオン・繰り返しフィールドについて解説。繰り返しフィールドは投稿者が入力フィールドを追加しながら情報を入力できるフィールドを提供。
-
WordPressの一覧ページのテンプレートの種類とファイルの設定
ファイル名に従って一覧ページのテンプレートは選択される。ルールに従ってファイル名を付けることで任意のカテゴリ、タクソノミーごとのテンプレートを指定可能。
-
WP jQuery LightBoxでWordPressの画像を簡単に見やすくする方法解説
画像のリンクに対して LightBox効果を簡単に追加するプラグイン。インストールして数項目にチェックを入れるだけで設定完了。属性を追加することで機能も追加できる。
-
Advanced Custom Fieldsの関数の全部の使い方を調べてみた
Advanced Custom Fieldsに用意されている関数を全て調べてみた。よく使うget_field、the_field以外にも多くの関数が用意されていて、フォームを作成することも可能。