Web上でコードを書けるサービスが増えています。そのままファイルとして保存したり、クラウド上で実行できるようになっています。そうした時にデフォルトのテキストエリアを使っていては全く書く気がなくなってしまうでしょう。 そこで使ってみたいのがMonaco Editorです。Microsoft製のプログラミングエディタVS Codeでも使われているソフトウェアです。

Monaco Editorの使い方

メイン画面です。行番号がついて、カーソル行が分かりやすく囲まれています。

テーマを変更しました。各種言語に対応したハイライタが備わっています。

CSSでテーマをハイコントラストに変更しました。

言語によってはこのようなツールチップ表示もサポートされています。

Diff（差分）エディタもあります。

2画面だけでなく、1画面での表示も行えます。

Monaco EditorはVS Codeでも使われているとあって、デスクトップでもWeb上でも使えるプログラミングエディタになります。VS Codeの使い勝手が良くなると、Monaco Editorもレベルアップしていくことでしょう。これは期待できそうです。

Monaco EditorはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Monaco Editor Microsoft/monaco-editor: A browser based code editor