CodeMirrorとは
CodeMirrorとはブラウザでコーディング用のエディタを実現するためのJavaScriptライブラリです。
多数のプログラミング言語のシンタックスハイライト、自動インデントなどコードエディタに必要な機能を備えています。
wp-codemirror
wp-codemirrorとはWordPressに内蔵されているCodeMirrorです。
WordPressのテーマエディターやプラグインエディターで使われています。
ショートカットが使えることが多い
ブラウザで動作するコードエディタにはCodeMirrorで実現されているものが多くあります。
有名なところではWordPressのテーマエディタとプラグインエディタでもCodeMirrorが使われており、PHP、HTML、CSSなどがシンタックスハイライトされます。
こうしたエディタではキーボードショートカットが使えることが多いです。
例えばなんとなくCtrl + Fを押してみると検索ができたりします。
しかし、どんなショートカットが使えるのか明確でないエディタも多くあります。
CodeMirrorのコマンド
そうしたショートカットはCodeMirror.commandsオブジェクトによって定義されるコマンドを実行します。
コマンドもそれに対応するショートカットもCodeMirrorのデフォルトのままというのがほとんどのようです(独自に追加していればさすがにマニュアルなどで明確にするかと)。
下表はデフォルトのコマンドとショートカットです。
| CodeMirror コマンド | ショートカット | 操作 | |
|---|---|---|---|
| Windows | Mac | ||
| save | Ctrl+S | Cmd+S | 保存 |
| find | Ctrl+F | Cmd+F | 検索 |
| findNext | Ctrl+G | Cmd+G | 次を検索 |
| findPrev | Shift+Ctrl+G | Shift+Cmd+G | 前を検索 |
| replace | Shift+Ctrl+F | Cmd+option+F | 置換 |
| replaceAll | Shift+Ctrl+R | Shift+Cmd+option+F | 全て置換 |
| defaultTab | Tab | 選択範囲があれば1インデントする なければタブ文字を挿入 | |
| indentAuto | Shift+Tab | カーソル行か選択範囲を 自動インデントする | |
| indentMore | Ctrl+] | Cmd+] | 現在行か選択範囲をインデントする |
| indentLess | Ctrl+[ | Cmd+[ | 現在行か選択範囲をデデントする |
| newlineAndIndent | Enter | 改行を挿入し自動インデントする | |
| insertTab | – | タブを挿入する | |
| insertSoftTab | – | タブ幅に合わせてスペースを挿入 | |
| killLine | – | Ctrl+K | 行末まで削除 |
| delLineLeft | – | 行頭まで削除 | |
| deleteLine | Ctrl+D | Cmd+D | 行を削除 |
| delWrappedLineLeft | – | Cmd+delete | 物理行頭まで削除 |
| delWrappedLineRight | – | Cmd+fn+delete | 物理行末まで削除 |
| delCharBefore | Shift+Backspace | Ctrl+H | 前の文字を削除 |
| delCharAfter | Delete | Ctrl+D | 後ろの文字を削除 |
| delWordBefore | – | option+delete | 前の単語を削除 |
| delWordAfter | – | option+D | 後ろの単語を削除 |
| delGroupBefore | Ctrl+Backspace | option+delete | グループの先頭まで削除 |
| delGroupAfter | Ctrl+Delete | Ctrl+option+delete option+fn+delete | グループの最後まで削除 |
| transposeChars | – | Ctrl+ T | 前後の文字を入れ替える |
| undo | Ctrl+Z | Cmd+Z | アンドゥ |
| redo | Ctrl+Y | Shift+Cmd+Z Cmd+Y | リドゥ |
| toggleComment | 行をコメント化する/しない | ||
| toggleOverwrite | Insert | 上書きフラグをON/OFFする | |
| goDocStart | Ctrl+Home | Cmd+Home Cmd+↑ | ファイル先頭へ移動 |
| goDocEnd | Ctrl+End | Cmd+End Cmd+↓ | ファイル末尾へ移動 |
| goLineStart | Alt+← | Ctrl+A | 行頭へ移動 |
| goLineStartSmart | Home | 行頭へ移動 | |
| goLineEnd | Alt+→ | Ctrl+E | 行末へ移動 |
| goLineRight | – | Cmd+→ | 物理行末へ移動 |
| goLineLeft | – | Cmd+← | 物理行頭へ移動 |
| goLineLeftSmart | – | 物理行頭へ移動 | |
| goLineUp | ↑ | ↑ Ctrl+P | 上へ1行移動 |
| goLineDown | ↓ | ↓ Ctrl+N | 下へ1行移動 |
| goPageUp | PageUp | PageUp Shift+Ctrl+V | 上へ1画面移動 |
| goPageDown | PageDown | PageDown Ctrl+V | 下へ1画面移動 |
| goCharLeft | ← | ← Ctrl+B | 左へ1文字移動 |
| goCharRight | → | → Ctrl+F | 右へ1文字移動 |
| goWordLeft | – | option+B | 前の単語の先頭へ移動 |
| goWordRight | – | option+F | 次の単語の末尾へ移動 |
| goGroupLeft | Ctrl+← | option+← | 前のグループの左に移動 |
| goGroupRight | Ctrl+→ | option+→ | 後ろのグループの右へ移動 |
| goColumnLeft | – | 線境界を越えずに左へ1文字移動 | |
| goColumnRight | – | 線境界を越えずに右へ1文字移動 | |
| selectAll | Ctrl+A | Cmd+A | 全選択 |
| singleSelection | Esc | プライマリ以外の選択範囲を解除 | |
| undoSelection | Ctrl+U | Cmd+U | 範囲選択の変更をアンドゥ |
| redoSelection | Alt+U | Shift+Cmd+U | 範囲選択の変更をリドゥ |
上の表でショートカットが割り当てられているコマンドは実際にショートカットが使える可能性が大きいです。
ブラウザベースのコードエディタを使っているならとりあえず試してみても損はないかと思います。
ショートカットを活用すればコーディングが速くなるためです。
コメント