SyntaxHighlighterプラグインの役割、負荷の比較

この記事は約8分で読めます。

2017-03-22WordPressプラグイン

※ベストなSyntaxHighlighterプラグインを探している方は、こちらの記事へお回りください。

SyntaxHighlighterプラグインの重要性

WordPressの記事を書くなら、SyntaxHighlighterプラグインは必須です。
ソースを記事に直打ちすると正しく反映することができませんので。
その結果として、読んだ人がコピペ一発で試せます。
本サイトみたいに、超初心者向けに書いていれば尚更です。

逆に言うと超初心者にとっては必要のないプラグインかもしれません。
そういう場合は「こういうプラグインで表示されてるんだよ」ということだけお知りおきください。

SyntaxHighlighterプラグインの欠点

その1 重い

WordPress高速化の弊害となる代表格とも言いうるプラグインです。
そのため「必要な時だけ読み込む」オプション(もしくは元々そういう仕様であること)が必須となります

その2 相性がうるさい、もしくはクセが強い。

何の前触れもなく挙動がおかしくなります。
幸いSyntax系のプラグインは山ほどあるので渡り歩くといいです。
これらプラグインは互換性がありますので。
(一部書き換えないと動かないので完全互換じゃない場合もありますが)
ハッキリ言うと使えれば、そして軽ければ、どのプラグインでもいいと思います。

SyntaxHighlighterプラグイン各種の特徴

私は渡り歩いて四つめ。
具体的には、インストールした順番に次の通りです。

  1. Syntax Highlighter Compress
  2. SyntaxHighlighter Evolved
  3. Crayon Syntax Highlighter
  4. WP SyntaxHighlighter

この内のSyntaxHighlighter EvolvedとCrayon Syntax Highlighterが二大巨頭。
以下では「変えた理由」について述べていきます。

1 Syntax Highlighter Compress

入れるのは楽、設定不要。
ただし……

質問者の写真

他のサイトみたいに、コピペするためのツールバーが出ないよ~

 

他のサイトではツールバーがあって、ボタンを押せばコピペできる様になっています。
なのに、そのツールバーがない!

他のサイトでは問題にならないと思います。
右クリックしてコピーしてもらえばいいのですから。
しかし本サイトは小説発表が主な目的のサイト。
そのため右クリックを禁止にしています(※H28年12月12現在は右クリック可です)。
もう死活問題とすら言えます。

──しかし答えは思わぬところにありました。 

解答者の写真

 ライブラリが「SyntaxHighlighter 2.x」を使ってるプラグインじゃないとツールバーは出ないよ。

Syntax Highlighter Compressは3.xのみの対応
ということでさようなら~となりました。

他のプラグインの場合は、ライブラリを選ぶ項目で2.xを指定してください

2 SyntaxHighlighter Evolved

長所は

  • 設定画面が日本語、わかりやすいです。
  • 負荷が軽いです(後述)。
  • 更新が現在も続いてます。

ただSyntaxHighlighter Evolvedについては……

質問者の写真

ビジュアルエディタに、ソース入力するためのボタンがないよ~。

 

他のエディタだとついてます。
はcompassから乗りかえた後だっただけにびっくりしました。
どこまで「ビジュアルエディタは使うな」と言わんばかりの仕様なんですか。

ただし、これについては、

解答者の写真

SyntaxHighlighter TinyMCE Button というプラグインを入れてね。
このプラグインの設定からSyntaxHighlighter Evolvedをチェック。これでボタン出たでしょ?

 

かなり使い勝手がよくなります。

でも実は……このプラグインを入れると、設定事項も外観も、後述するWP SyntaxHighlighterと変わらなくなります。
というのも、SyntaxHighlighter TinyMCE ButtonはWP SyntaxHighlighterの作者。
後者にはデフォルトでプラグインが入っている上に高機能で軽い。
それなのにEvoledを使う意味があるのかという話になりますので。

あと、参考までに。
Evolvedには「ツールバーの二番目のボタンが表示されない」という現象もあります。
対策法を述べたサイトもありましたが、私の環境では直らなかったので割愛します。
実用上は無視できる不具合(?)ですし。

3 Crayon Syntax Highlighter

続いて試したのがCrayon Syntax Highlighter、愛称「クレヨン」。

長所は、以下の通り。

  • カラフルでソース打ち込むのが楽しくなる
  • 設定画面が日本語
  • オプション豊富で超高機能
  • 安定してる
  • 更新が続いてる

使う側に何も問題なければ、私のイチオシです。

欠点は「ひたすら重い」こと!
しかし実は対処法があります。それは、

解答者の写真
動作を軽くするためのオプションがあるの!
 

クレヨン

クレヨンを使うなら、赤丸で囲んだ部分をチェックしてください。

前者は文字通り「必要なときだけ読み込む」。
これにチェックを入れることで、プラグインを使っていないページの表示を高速化します。
後者は英語ですが、スクリプトをフッターで読み込むというものです。
いわゆるレンダリングストップの回避です(わからない場合は読み流して下さい)。

しかし私の環境ですと……問題が発生しました。

後者のオプションはまだともかく、前者は必須と言っていいオプション。
なのにチェックを入れると、スライダープラグインwow sliderと干渉してしまいました。
(アニメーションしなくなる)
ソース書いてないページで干渉するというのがよくわからないのですが……。
クレヨンを無効化すると症状が治るので、これが原因なのは間違いない。
というわけで諦めることにしました。
(現在はスライダーの方を外し、クレヨンを使っています)現在はどちらも使ってません。

なお、元々wowsliderは、かなり不安定なプラグインであることは付け加えておきます。

4 WP SyntaxHighlighter

WP SyntaxHighlighterの長所は、

  • 設定画面が見やすい(Evolvedと大して変わりませんが)。
  • 必要時にしかスクリプトを読み込まないオプションが、しっかり働く(後述)
  • 動作も安定してる(現在のところ)

短所は、

  • 表示が遅い(まるでLazyLoadを動かしてるみたいな感じ)

ただし負荷自体は「重い」わけじゃなく、むしろ軽いです。

以下、Crayon Syntax HighlighterとWP SyntaxHighlighter。
ついでにSyntaxHighlighter Evolvedをやってみたいと思います。