highlight.js導入で軽量化！Crayon Syntax Highlighterが重いと感じたら必読です

WordPressでソースコードを表示する時、よく使われているプラグインに、Crayon Syntax Highlighter があります。

インストールするだけで、ソースコードを綺麗に表示してくれ、おまけに高機能なところが人気の秘密ではないでしょうか。

しかし、その裏返しとして、動作が重かったり、多機能すぎて使いにくいと感じる人も少なくないようです。

そこで今回は、シンプルながら美しいデザイン、そして、動作が軽量だと評判のハイライター highlight.js をご紹介したいと思います。

highlight.jsよりも、もっと良いシンタックスハイライター見つけました！

最新記事：WordPressでシンタックスハイライトならPrism.jsが軽量＆多機能でベストチョイス

highlight導入のメリットは？

通常、テキストエディタでコードを表示すると、見やすいよう種類別に分類し、色分け表示してくれます。

これを、シンタックスハイライトといいます。

下の画像は、mac用テキストエディタ TextWrangler のスクリーンショットです。

同じコードをWordPress の投稿ページで、そのまま表示すると、以下のようになります。（使用テーマ：Twenty Seventeen ）

正直、テキストエディタと違って、WordPresデフォルトのままだと、色分けなんかがされていないので、ちょっと見にくいですよね。

ところが、Crayon Syntax Highlighter などのプラグインを使うと、とっても綺麗にシンタックスハイライトしてくれるんです。

サイトを重くする要因になっていた

しかし、人気のプラグイン、Crayon Syntax Highlighter も万能ではありません。

GoogleのPageSpeed Insights でサイトの速度を検証するとこのような警告が…。

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
このページには、ブロッキング CSS リソースが 1 あります。これが原因で、ページのレンダリングに遅延が発生しています。

犯人は、crayon.min.css となっています。つまり、Crayon Syntax HighlighterのCSSが、レンダリングブロックの原因なんですね。

Crayon Syntax Highlighterは、とってもお手軽に導入できる反面、サイトを重くする要因を作っていたのです。

highlight.js はシンプル軽量なJSライブラリ

WordPress のプラグインではありませんが、シンプル軽量で、とっても評判の良いシンタックスハイライターが highlight.js 。

Crayon Syntax Highlighter と比較すると、Highlight.js は導入に手間がかかるし、行番号も表示されないし、機能は少ないしと、デメリットがたくさんあります。

行番号も表示できる軽量なシンタックスハイライター見つけました！

最新記事：WordPressでシンタックスハイライトならPrism.jsが軽量＆多機能でベストチョイス

しかし、highlight.js には、それらを全部打ち消すほどのメリットがあるんです！

それは、とにかく軽い！！！

とにかく軽量なんで、Crayon Syntax Highlighterの重さに悩んでいる方なら、すぐさま乗り換えを検討してみる価値があると思います。

highlight.js は、WordPressプラグインではなく、javascriptライブラリなので導入に一手間かかりますが、表示速度の向上に貢献するのは間違いありません。

機能は絞られますが、highlight.js のデザインも十分に綺麗ですしね。

highlight.jsの導入方法

それでは、実際にhighlight.jsを導入してきましょう。

導入方法は二種類あります。

1. CDNを使って、外部のJSライブラリを呼び出す。
2. 自分の管理するサーバーにJSライブラリをダウンロードする

今回は、もちろん高速化が期待できるサーバーにJSライブラリをダウンロードして使用する方法を選択します。

公式サイト https://highlightjs.org/ にアクセスし、Get versionボタンをクリックしてください。

2017/2/7現在、最新バージョンは9.9.0です。

次の画面で、使用する予定の言語を選択してダウンロードしてください。

すると、highlight.zipファイルがダウンロードされるので、解凍して開きます。

必要なのは、highlightフォルダの中の、highlight.pack.js と styleフォルダだけです。

highlight.pack.js がJavaScript本体、そして、styleフォルダには、デザインのための、以下のCSSテンプレート集が入っています。

たくさんありますが、CSSファイルはすべてデザインテンプレートです。

ここから気に入ったものを探しても良いですし、さらに自分なりにアレンジを加えても良いでしょう。

ファイルを呼び出すコードは、functions.phpに記述します。以前であれば、header.phpに以下のように記述して呼び出していましたが、現在は推奨されていない古い方法です。

<link rel="stylesheet" href="/wp-content/themes/twentyseventeen-child/css/highlight/xcode.css">
<script src="/wp-content/themes/twentyseventeen-child/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

現在、WordPressでCSSとJSを呼び出す時に推奨されているのは、functions.phpで wp_enqueue_style( ) と wp_enqueue_script( ) を使い呼び出す方法です。

こちらの方法でファイルを読み込むのが、正しいやり方です。

add_action( 'wp_enqueue_scripts', 'my_files' );
function my_files() {
 	//highlight.jsのスタイルシートとJSの呼び出し
 	wp_enqueue_style( 'highlight-style', get_stylesheet_directory_uri() . '/css/highlight/xcode.css' );
 	wp_enqueue_script( 'highlight-script', get_stylesheet_directory_uri() . '/js/highlight.pack.js', array('jquery'), '20190220', true );
}

上記を参考に、functions.phpにコードを追記してください。

しかし、これだけでは、まだ使えるようになっていません。highlight.pack.jsをテキストエディタで開いて、一番最後に次の関数を1行追加します。

hljs.initHighlightingOnLoad();

これで、highlight.jsは使えるようになるはずです。

私の場合、highlight に付属していたxcode.cssをカスタマイズして使っていますが、テーマによってデフォルトのCSSに違いがあるので、手を加えてあげる必要があると思います。

一応、参考までに、このサイトでカスタマイズして使っているxcode.css をご紹介して終わりますんで、参考になさってください。

現在、このサイトでは、highlight.jsより多機能・軽量なPrism.jsを使用しています。行番号も表示できるので、とってもオススメです！

highlight.jsよりも、もっと良いシンタックスハイライター見つけました！

最新記事：WordPressでシンタックスハイライトならPrism.jsが軽量＆多機能でベストチョイス

/*

XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>

*/
pre {
	padding: 0;
	word-wrap: normal; /*** 画面から高度がはみ出した時の横スクロール処理 *******/
	white-space: pre;  /*** word-wrap: normal;とともに、こちらも記述が必要 ***/
}

.hljs {
  display: block;
  overflow-x: auto;
  /*padding: 0.5em;*/
  background: #f4f4f4;
  color: black;
  font-size: 0.8em;
  line-height: 1.5;
  border: 2px solid #ccc;
  padding: 0.9em 1.2em;
  border-radius: 7px;
}

.hljs-comment,
.hljs-quote {
  color: #006a00;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
  color: #aa0d91;
}

.hljs-name {
  color: #008;
}

.hljs-variable,
.hljs-template-variable {
  color: #660;
}

.hljs-string {
  color: #c41a16;
}

.hljs-regexp,
.hljs-link {
  color: #080;
}

.hljs-title,
.hljs-tag,
.hljs-symbol,
.hljs-bullet,
.hljs-number,
.hljs-meta {
  color: #1c00cf;
}

.hljs-section,
.hljs-class .hljs-title,
.hljs-type,
.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-params {
  color: #5c2699;
}

.hljs-attribute,
.hljs-subst {
  color: #000;
}

.hljs-formula {
  background-color: #eee;
  font-style: italic;
}

.hljs-addition {
  background-color: #baeeba;
}

.hljs-deletion {
  background-color: #ffc8bd;
}

.hljs-selector-id,
.hljs-selector-class {
  color: #9b703f;
}

.hljs-doctag,
.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}