import remarkCustomBlocks from 'remark-custom-blocks'; const getDefaultMdxOptions = () => ({ // ... remarkPlugins: [ [ remarkCustomBlocks, { exercise: { classes: 'exercise', title: 'required', }, }, ], ], }); next-mdx-remote の mdxOptions に remarkCustomBlocks を追加し、オプションを設定する。classes でブロックにあてる CSS クラス名を、title でタイトル部分が必須かどうかを設定できる。 /* * Custom Blocks */ .exercise, .practice { border: 1px solid #e2e8f
![markdownにカスタムブロックを追加する | suzukalight.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/50558a957853c58cabf314cbf6a695e5ad146884/height=288;version=1;width=512/https%3A%2F%2Fsuzukalight.com%2Fcontents%2Fsnippet%2F2021-01-12-remark-custom-blocks%2Fremark-custom-blocks.png)