feat: add remark-directive and callout directive transformer

next.config.ts

@@ -2,6 +2,7 @@ import type { NextConfig } from 'next'
 import createMDX from '@next/mdx'
 
 const mdxCodeBlockPipeline = new URL('./lib/mdx-hast-visitor.js', import.meta.url).pathname
+const calloutDirectivePath = new URL('./lib/callout-directive.js', import.meta.url).pathname
 
 const nextConfig: NextConfig = {
   output: 'export',
@@ -11,7 +12,14 @@ const nextConfig: NextConfig = {
 
 const withMDX = createMDX({
   options: {
-    remarkPlugins: ['remark-frontmatter', 'remark-smartypants', 'remark-math', 'remark-gfm'],
+    remarkPlugins: [
+      'remark-frontmatter',
+      'remark-smartypants',
+      'remark-math',
+      'remark-gfm',
+      'remark-directive',
+      calloutDirectivePath,
+    ],
     rehypePlugins: [
       'rehype-slug',
       ['rehype-external-links', { target: '_blank', rel: ['nofollow', 'noopener', 'noreferrer'] }],