はじめての mdx の投稿

マークダウンって、シンプルなテキストの記事を書くにはとても簡単ですが、画像や動画を貼り付けたりするのはやや苦手のようです。

いろいろ調べるうちに .mdx というファイル形式があるようなので、それで作ってみました。

いろいろとインストール

mdx に関していろいろインストールします。

yarn astro add mdx
yarn add @astrojs/mdx
yarn add react react-dom

記事一覧のための変更

src/pages/blog.astro で記事一覧をしていますが、以下のように変更。

const allPosts = await Astro.glob('../pages/posts/*/*.{md,mdx}').then(posts => posts.reverse());

つまり、md と mdx の両方を検出します。

書式

これが、最初は全くわかりませんでした。

chatGPT も動かないスクリプトばかり提示してきてどんどんハマっていきましたが、最終的には動きました。

---
layout: /src/layouts/MarkdownPostLayout.astro
title: 'はじめての mdx の投稿'
pubDate: "2024-04-03"
tags: ["mdx"]
---

このようなフロントマターを持つ書式で、拡張子「.mdx」で保存します。

md とフロントマターを付けて同じ表記でいいようですが、mdx にしかない書式もあるようです。

この形式で動くであればこの方が今の段階ではいいような気がします。

しかし、これまでのマークダウンでできなかったことが mdx で実現できている感じがまったくなく、多分どこか間違っているかもしれません。