WordPress: Crayon Syntax Highlighterを止めた理由

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
us us
wordpress image

WordPressプラグインのCrayon Syntax Highlighterを使うのをやめました。代わりのものがあるので、プラグインを使う必要がないからです。

サイトのパフォーマンス上、SEOを考えるとプラグインは少ない方が良いです。代わりとして Prism.js を使うことにしました。

シンタックスハイライトとは

シンタックスハイライトは、ソースコードを見やすくするため、シンタックス(文法)で決まっている文字列をハイライトする機能です。

text = true
if(text) {
    //シンタックスハイライトです
}

一般的にはこのように表示する機能のことを言います。WordPressのプラグインやJavaScriptのプラグインとして提供されています。

なぜ highlighter.js を選ばなかったのか?

シンタックスハイライト機能を持ったJavaScriptプラグインに highlighter.js があります。おそらくもっとも利用されている有名なプラグインでしょう。

今回、highlighter.jsの使用は見送りました。一番の理由は行数表示がデフォルト機能でないからです。

highlighter.js は機能拡張をするたびに、別途機能拡張用のJavaScriptを実装する必要があります。

highlightjs-line-numbers.js を実装することで行数を表示することは可能です。しかし、JavaScriptファイルの最適化(ファイル結合、圧縮)作業を行うのがめんどうなのでやめました。

WordPressプラグインのAutoptimizeで最適化するからそんなことはないじゃないか?という意見もあるかもしれません。

確かにそうです。ただ、ぼくはサイトのファーストビューをできるだけ速く表示するように、JavaScript, CSSの最適化を自分でカスタマイズできる環境を作っています。

Autoptimizeプラグインはカスタマイズしないものを対象に限定しています。そこで、同じような機能をもつ Prism.js を選びました。

Prism.js は軽量で実装する機能を選択できる

Prism.js では、jsファイルをダウンロードするときに、どの機能を使用するかオプションで選択できます。ダウンロードするJavaScript、CSSファイルはそれぞれ1つにまとめられています。

JavaScript、CSSファイルはサイズが小さい方がよく、使わない機能は無駄にサイトのパフォーマンスに影響を与えるので、できる限り実装したくありません。

ということで、あらかじめ機能を選択できる Prism.js に決めました。

そんなに小さなことを気にすることはないじゃないか?

それぐらいでは影響ないでしょ?

という意見もあると思います。

しかし、サイトのパフォーマンスを改善する作業をする中で、小さな作業の積み重ねは簡単に無視できないと改めて気づかされました。

いかに楽して目的を達成するのかを求めることも大事ですが、それで解決できないものはやはり手を動かすことが大事なんですね。

ここに、Prism.jsの実装方法があります。ぜひ、見てみてください。

 

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!