mdx: add remark-frontmatter to pipeline, fix rehype-pretty-code line numbers visitor

next.config.ts

@@ -9,7 +9,7 @@ const nextConfig: NextConfig = {
 
 const withMDX = createMDX({
   options: {
-    remarkPlugins: ['remark-smartypants', 'remark-math', 'remark-gfm'],
+    remarkPlugins: ['remark-frontmatter', 'remark-smartypants', 'remark-math', 'remark-gfm'],
     rehypePlugins: [
       'rehype-slug',
       ['rehype-external-links', { target: '_blank', rel: ['nofollow', 'noopener', 'noreferrer'] }],
@@ -17,9 +17,18 @@ const withMDX = createMDX({
       ['rehype-pretty-code', {
         theme: { light: 'github-light', dark: 'github-dark-dimmed' },
         keepBackground: false,
-        lineNumbers: true,
         grid: true,
       }],
+      (tree) => {
+        const { visit } = require('unist-util-visit')
+        visit(tree, 'element', (node: any) => {
+          if (node.tagName === 'pre' && node.children?.length === 1 && node.children[0].type === 'element' && node.children[0].tagName === 'code') {
+            const code = node.children[0]
+            code.properties = code.properties || {}
+            code.properties['data-line-numbers'] = ''
+          }
+        })
+      },
       'rehype-katex',
     ],
   },