esareaでWebページの入力エリアをesaライクなマークダウンエディタ化する

最近esa.ioを導入し利用しているのですが、単純にマークダウンエディタとして考えても非常に使いやすいです。

特に以下のようなテーブルを扱う動きに対して、私は「これだ・・・！」という気持ちになりました。

本記事でご紹介させていただくesareaは、Webページのtextareaをesaライクなエディタとして扱えるようにするChrome拡張です。

• chromeウェブストア | esarea
• GitHub | esarea

esareaでできること

esareaは、Webページのtextareaをesaライクなエディタとして扱えるようにするChrome拡張です。 こちらからインストールできます。

README.mdに記載されている通りなのですが、esareaでできることを紹介させていただきます。

tab/shift+tabでのインデント調整

基本的にブラウザでtextareaをフォーカスしたままtabを押すとフォーカスがずれますが、esareaをインストールした状態だとtextareaをフォーカスしたまま編集中の行のインデントを調整できます。

テーブル関連の操作

テーブルの生成

テーブルをヘッダだけ入力してEnterを押すと、テーブルのテンプレートが生成されます。

テーブルをちまちま入力するのが面倒でGitHubのマークダウンでちょっとしたテーブルを書くのを避けることがあったのですが、概ね全部解決するのではと思いました。

テーブルの行生成

テーブルの編集中に、行末でEnterを押すと次の行のテンプレートが生成されます。

セルのジャンプ

テーブルのセルにカーソルを合わせた状態でtab/shift+tabでセル間のジャンプができます

リストの操作

要素の追加

リストの入力中にEnterで、次の要素を追加できます。

リストについてもtab/shift+tabでインデントの調整が可能です。

チェックボックス付きリストの操作

Alt + Shift + SpaceでチェックボックスのOn/Offを操作できます。

まとめ

esareaはWebページのtextareaをesaライクなエディタとして扱えるようにするChrome拡張です。

GitHubなどの入力フォームをマークダウンエディタのように利用することができ、特にリストとテーブルの記載を簡素に行うことが可能です。

Chromeの拡張でブラウザのまま利用できるので、ちょっとした説明をマークダウンで記載する際に一旦ブラウザ以外のマークダウンエディタを使わなくて済むところが素敵だな思いました。

私からは以上です。