なうびるどいんぐ

脳みそ常時-3dB

WordPress用のシンタックスハイライトプラグイン作った

      2018/09/08    HimaJyun

自分用です。が、せっかく作ったので使いたい人向けにGitHubにポイしておくので説明を。

スポンサーリンク

JHighlight

さっさと紹介してしまおう。今回作ったのはJHighlight、WordPress向けシンタックスハイライトプラグインです。

既に似たようなプラグインがあるかも知れませんが、調べるのめんどくさかったので自分で作りました。(既存プラグインだといつまでサポートされるか分からないので)

ハイライトにはhighlight.jsを使っています。

お先に使い方から。

使い方

  1. GitHub(HimaJyun/jhighlight)からダウンロード
  2. アップロードして有効化
  3. (必要なら)設定する
  4. 使う

分かりやすいですね。

必要なバージョン

古すぎなければ動くと思います。参考までにPHP7で正常に動いています。

サンプル

こんな感じだよ

#include <iostream>

int main() {
	std::cout << "Hello, world!" << std::endl;
	return 0;
}

ちなみにこのサンプルソースはタブインデントになっていて、タブをタブのまま扱えるというのもちょっとしたポイントだよ！(もちろん設定次第でスペース4つにする事も可能)

特徴

特徴とかは以下の通り。

ビジュアルエディタでコードがぶち壊れない

重要です。このプラグインはビジュアルエディタとの親和性を意識してます。

具体的に言うと、ビジュアルエディタに「ソースコード挿入」ボタンを設けます。ここから挿入したソースコードは適切にエスケープされ、ビジュアルエディタに破壊されません(もちろん、テキストエディタと切り替えても問題ない)

ソースコードがぶち壊れるプラグインが多かったのでこの機能を付けました。Crayonとかにあるのと似たような奴

(テキストエディタで編集するのなんて効率悪いです、私はそんな事やりたくないかな)

遅くならない

Crayon Syntax Highlighterは完成度が高いのですが重いです。

何をどうしてるのか知りませんが、以前試してみた時にソースコードを増やせば増やすほどロードが遅くなっていたような気がします。

このプラグインではページロード時の処理が最小限です(というかスクリプトのロードしかやってない)

なので、どれだけソースコードを増やしてもページのロードが遅くなる事は(恐らく)ないはずです。

HTMLエスケープする

<pre>の中身ってHTMLエスケープしなきゃならないんですよ、知ってました？

この辺りもキチンと処理します。タグの含まれる文字をそのまま突っ込んでも問題ナシ！

(たまに「ここのサイト/ツールを使えばエスケープ出来るので、それをしてから貼り付けましょうね～」なんて記載を見かけますが、そんな手間のかかる事出来るかっての、ねぇ？)

当然ながらにHTMLエスケープなどの処理はソースコードを挿入した時点で済ませてしまいます。

先に出来る事は先にやる、後に延ばせば延ばすほど後でやる事が増える。当たり前ですね。

言語ファイルの結合

設定画面からオプションをオンにすると言語ファイルを自動で結合します。(該当のディレクトリに書き込み権限が必要です)

複数のプログラミング言語を個別にロードするのではなく、ひとまとめにしてしまうのでHTTPの往復が減ります。

また、言語ファイル結合を有効にしている場合はhighlight.jsがasync属性付きで読み込まれるようになります。

(結合してない時は「highlight.jsのロード->言語ファイルのロード->初期化」が必要なためasyncは付きません)

不要なページで読み込まない

設定画面からオプションを有効にすると、シンタックスハイライトを使っていないページでスクリプトをロードしなくなります。(デフォルトで有効)

使わないページでも読み込むとか無駄でしょ、はい。

制約

上記のメリットを実現するためにいくつかの弱点もあります。

機能は最小限

これはどちらかというとhighlight.jsの制約です。

highlight.jsは「行番号の表示」や「クリップボードにコピーボタン」、「行ハイライト」などの機能はありません。

それらに対応したprism.jsも一瞬検討したのですが、言語の自動検出がなかったのでパス。

必要だと思うなら自分でそういう機能を後付けするJavaScriptを書きましょう。

移行/互換機能はナシ

他のプラグインと互換性を保ったまま移行する機能はありません。コードが複雑になるだけなので付けませんでした。

もし構文が違うプラグインから移行するならSearch Regexみたいなプラグインを使って置換して下さい。

<pre><code>を使うプラグインならそのまま移行できると思います。

言語が多すぎると重くなります

選択した言語をロードするので、より多く選択すればするほどファイルサイズが肥大化します。(全て選択すると500KBほど)

言語の自動検出がある関係でどうしても全ての言語ファイルをロードせざるを得ないので、これは仕様です。

まぁ、普通はそんなに使わないでしょう？と。(言語ファイル結合を有効にしておけばasyncで読み込まれますし)

設定次第でcssのロードがbody前になる

これはまぁ、メリットでもあり、デメリットでもあるかな。

「不要なページで読み込まない」を有効にした時はロードのタイミング的な関係でcssがbodyの前で読み込まれます。(通常はheadの中)

これはファーストビューを早くするという意味ではメリットかも知れませんが、リフローが発生します。(無視できる範囲内かと)

その他

言っておきたい事、みたいなの。

自分用に作ったものです

このプラグインは自分用に作ったものです。「このプラグインは最低限の事が出来ればいい」くらいに考えているので、自分が必要だと思った機能しか実装しないつもりです。

GitHubのissueで「こんな機能が欲しいよ」とか言われても「へー、そうなんですか」で何もしない可能性大です(何か欲しい機能があるなら、自分で実装してPull Requestして下さい)

同じ理由で、今の所公式ディレクトリに登録するつもりはありません。そんな事しなくても自分が使う事に関しては何も関係ないので。

ライセンス

zlibです。作者を偽ったりさえしなければ好き勝手にしていい奴です。

どうぞ好き勝手に弄ってください、それこそ、これをそのまま公式ディレクトリに登録したりしても私は文句を言わないでしょう。

あなたが何をしようが、私が作って使う事には一切関係ないので。

 - Web制作