【WordPress】Emmetが使えるシンタックスハイライトHTMLエディタープラグインを作成【WP】

HTML Editor Syntax Highlighter

WordPressのテキストエディターで恐らく最強。
しかし、Emmetが使えません。
これだけが惜しい点です。Emmetが使いたい方は別のプラグインを使用しましょう。

WP Emmet

今回作成したプラグインの対抗馬です。設定も色々変更でき、Emmetが使えます。
しかし更新が7年以上も止まっており、プラグインの不具合か稀に記事を書いている最中にフリーズします。
機能的には申し分なかったのですが何回もフリーズして記事を打ち直しになったため今回類似プラグインを作成しました。

Custom HTML Block Extension

機能も充実していてかなり良さそうです。
私が作ったプラグインはかなりシンプルなので色々設定したい方はこちらがおすすめです。

Hee-html-emmet-editorの機能

 
今回作成したプラグインを使用するとこのように表示されます。
機能を大まかに紹介しますと以下の通りです。

 
機能的には「WP Emmet」の劣化版なのですがフリーズしないという点や、必要最低限のものしかインストールしないので軽いという点が勝っていると思います。
 

インストール方法

DL：H_HEE_html_emmet_editor.zip
 

 
公式プラグインに登録していないため、FTPでアップロードしてインストールして下さい。
解凍して出てきた「hee-html-emmet-editor」をサーバー内の「/wp-content/plugins」の中にアップロードします。
 

 
管理画面で有効化すると自動的にプラグインが動きます。
 

エディターのテーマを変える

テーマを変えることで文字色や背景色などを変更することができます。
自分の好きなエディターのテーマに変えてみましょう。
 

 
このプラグインは「CodeMirror」を元に作成されていますので、CodeMirrorのテーマを読み込むことで任意のテーマに変更することができます。
 

 
CodeMirror公式よりdownloadを押してダウンロードしましょう。
CodeMirror
 

 
中にあるthemeファイルの中身が目的のファイルになります。
サーバー上にあるhee-html-emmet-editorのthemeの中に好きなテーマをアップロードしましょう。
 

プラグインを編集

 
今回は例としてテーマをRuby Blueに変更します。
それではプラグイン内のhee-html-emmet-editor.phpを編集します。

    //変更前
    wp_enqueue_style( 'hee_codemirror_style4', plugins_url().'/hee-html-emmet-editor/codemirror/theme/vscode-dark.css' );
    //変更後
    wp_enqueue_style( 'hee_codemirror_style4', plugins_url().'/hee-html-emmet-editor/codemirror/theme/rubyblue.css' );

 
vscode-dark.cssの部分を任意のcss名に変更します。
例）vscode-dark.css → rubyblue.css
 

    //CodeMirror 設定
    //CodeMirror settings
    var editor = CodeMirror.fromTextArea(document.getElementById("content"), {
        mode: "htmlmixed",
        lineNumbers: true,
        lineWrapping: true,
        keyMap: "sublime",
        autoCloseBrackets: true,
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: "vscode-dark",
        indentUnit: 4,
        indentWithTabs: true,
    });

 
CodeMirror 設定部分の 「theme: “vscode-dark“,」を好きなテーマ名に変更します。
例）theme: “vscode-dark” → theme: “rubyblue”
 

 
これだけでテーマを変更することができます！簡単ですね！
テーマ名はCSSの名前と同じになっているのであまり困らないと思います。
 

その他のカスタマイズ

 
CodeMirrorの設定をそのまま使用できるため、自分の好きな設定に変更してみましょう！

 
特に「keyMap」などをよく使ってるエディターのものにすると良いかもしれません。
CodeMirrorマニュアル
 

ルナリス

Emmet最高！