Markdownをコンテンツとして利用しているWebサイトが増えています。HTMLに比べれば簡易的な記法ですし、知らずに書いても決して読めないものにはならないでしょう。そして素のMarkdownエディタだけでなく、ちょっとした付加価値を追加したものも多数作られています。 今回紹介するAsteroidはMarkdownエディタとJavaScript実行環境がセットになったソフトウェアです。

Asteroidの使い方

左側がエディタ、右側がプレビューになります。

コードも左側に書いて、その結果が右側に出ます。

Reactコンポーネントとして展開されます。

通常のMarkdownエディタとしての表示も問題ありません。

Three.jsを使って3Dオブジェクトの描画を行うこともできます。

AsteroidはMarkdownエディタとしての側面と、ライブコーディングを行う環境としての側面を併せ持っています。コンテンツを読みながらコードを書いて、その結果をその場で確認できる、そんな便利な実行環境です。

AsteroidはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

Asteroid spring-raining/asteroid: JavaScript & Markdown live editor on your browser