ドキュメントの中にコードを記載するのは良くあることですが、単に書いてあるだけでは分かりづらいこともあるでしょう。たとえばIDEのようにマウスオーバーで説明を出したり、コメントなどで説明されているとより便利です。 今回紹介するTwoslashはそんなドキュメントを作成するライブラリです。

Twoslashの使い方

Twoslashの例です。コードに説明が追加されています。

変数の説明にも使えます。

書き方として cut を使います。

ソースとその実行例です。

入力補完の再現もできます。

エラーの表示にも使えます。

カラーテーマも多数用意されています。

マウスオーバーにも対応しています。

こんな感じに説明があると分かりやすいですね。

TwoslashはTypeScriptを用いることでコードの静的解析と補完が可能になります。補完内容を自分で記述したり、TypeScriptにも任せられます。より分かりやすいドキュメントを書くために見逃せないライブラリです。

TwoslashはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

Shiki Twoslash: Static Code Samples for JS Projects shikijs/twoslash: You take some Shiki, add a hint of TypeScript compiler, and ? incredible static code samples