AstroのMDXでコードジャンプを実現する

最近このサイトにMDXを導入しました。
そのおかげで、マークダウンで表現できる幅が広がり満足しています。
例えば、以前記事で実装したスライドを出力するコードは以下のような呼び出しにすることができます。

MDX対応前#

<div class="astro-reveal-wrapper">
    <div class="astro-reveal-toolbar">
        <div id="id" class="astro-reveal-embed">
            <iframe src="/slides/test" allowfullscreen loading="lazy"></iframe>
        </div>
        <div class="astro-reveal-toolbar-inner">
            <button class="astro-reveal-fullscreen" data-target="id">⤢</button>
        </div>
    </div>
</div>

MDX対応後#

import Slide  from 'src/components/markdown/Slide.astro'

<Slide target="test" />

今回は、上記のコンポーネントへのジャンプ機能を追加する方法です。
プラグインを探してみたのですが、MDXからAstroコンポーネントにジャンプできそうなものはありませんでした。

MDX TS Paths Alias - Go To Definitionというプラグインがあるのですが、MDXからTypeScriptのパスエイリアスにジャンプするものでした。
やりたいことは、MDXからAstroファイルにもジャンプさせたいだけだったので、このプラグインをカスタマイズすることで実現しました。

Githubからコードをダウンロード

vscode-extension-mdx-ts-paths-alias

ソースコードを修正

src/extension.tsを以下のように修正します。

// 73行目、107行目に変更対象のコードがあります。
- const extensions = [".ts", ".tsx", ".js", ".jsx"];
+ const extensions = [".ts", ".tsx", ".js", ".jsx", ".astro"];

ビルド

cd [ソースコード ディレクトリ]
npm install
npm run package

パッケージをインストール

VS CodeでCommand+Shift+Pを押し、「Extensions: Install from VSIX…」を選択し、ビルドしたパッケージをインストールします。
パッケージが有効化されれば、ジャンプ機能が使えるようになります。

おわりに#

今回の修正でまた一つ、MDXの利便性が増しました。
ただ、MDXには以下のような不便な点がまだあります。

シンタックスハイライトが効かない部分がある
コンポーネントの必要なパラメータのヒントが出ない

上記の2点に加えコードジャンプ機能も解決する独自プラグイン開発に挑戦してみようと思います。