てくのーと
467 文字
2 分

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

2024-05-07
2024-05-28

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

Astroでreveal.jsを使いたい!

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ファイルにもジャンプさせたいだけだったので、このプラグインをカスタマイズすることで実現しました。

  1. Githubからコードをダウンロード
vscode-extension-mdx-ts-paths-alias
  1. ソースコードを修正

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

// 73行目、107行目に変更対象のコードがあります。
- const extensions = [".ts", ".tsx", ".js", ".jsx"];
+ const extensions = [".ts", ".tsx", ".js", ".jsx", ".astro"];
  1. ビルド
cd [ソースコード ディレクトリ]
npm install
npm run package
  1. パッケージをインストール

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

おわりに#

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

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

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

\てくのーと おすすめ書籍!/

プログラミングを楽しみ続けるためには健康は不可欠!
本書では如何に健康であり続けるかが科学的な情報とともに紹介されています。
→感想詳細はこちら!