はじめに
Mdxはマークダウン記法ができる、マークダウンの拡張形式です。
jsxを埋め込むことができ、柔軟にカスタマイズすることができます。
何かしらのUIやスタイルのフレームワークを使用している場合、マークダウンからレンダリングしてHTMLを生成しても、その生成された要素にスタイルが割り当たらないことがあります。
また、Tailwindなどのフレームワークを使ってデザインを作成している場合、マークダウンの部分のみデザインが異なるみたいな事案が発生します。
これを防ぐために、mdxにもスタイルを割り当てたいです。
今回は、Tailwind CSSを使用したケースでの手法になりますが、bootstrap等でも同じ対処が行える認識です。
環境
- Next.js：14.0.3
-
tailwindcss
-
@next/mdx
手順
mdxWrapper.tsx
"use client"
import dynamic from 'next/dynamic';
import { NextPage } from 'next';
type Props = {
prop:string
}
const MdWrapper:NextPage = ({prop}) => {
const mdxPath = `${prop}.mdx`;
const Md = dynamic(() => import(`@/component/mdx/${mdxPath}`));
return (
<div className="mdxWrapper">
<Md />
</div>
);
}
export default MdWrapper;
mdxを囲う要素を作成しました。layoutなどでも問題ないと思います。
そして、mdxWrapperというクラスを親要素に追加しました。
mdx.tsx
# hello
h1指定の「hello」を記したmdxファイル作成component/mdx配下に作成しました。
page.tsx
mdxWrapperを読み込むページを作成します。
<MdRelay prop={"mdx"} />
上記によって、
レンダリング後は、
<h1>hello</h1>
という要素が出来上がります。
これに対して、Tailwind.cssを割り当てましょう。
globals.css
@applyは、Tailwind CSSの機能で、cssなどのファイル内でTailwindの独自クラスを割り当てすることのできるディレクティブです。
下のように記すことで、h1にTailwindのクラスが割り当てられ、スタイルが変更されます。
.mdWrapper > h1 {
@apply text-base font-bold leading-6;
}
画像のサイズ変更もできる
同じ手法を使えば、画像サイズの指定もできます。
.mdWrapper img {
margin:10px auto;
width: 60%;
max-width: 350px;
@apply border border-gray-300 rounded-md;
}
おわりに
mdxファイル内にも直接HTMLを書き込めたり、jsxを追加できますが、
不必要な場面では、極力使用を避けたいと思っています。
変数を埋め込んだり、という場面では是非とも使用したいですが、
スタイルのためだとか、画像サイズのために色々mdxファイルに書き込んでしまうと、
マークダウンの手軽さが失われてしまいます。
今回は、mdxをwrapする要素にクラスを割り当てmdx内要素のスタイルを変更しました。
mdxの複雑化を下げられ、かつシンプルに実装することができます。
他に良い方法があればご教授いただきたいです。
(画像サイズなどは、直接記したいところです。
(alt name)[file path]{width:xxx}
のような形で記せれば、個人的にはありがたいです。
コメント