support markdown tables syntax

next.config.ts

@@ -1,3 +1,4 @@
+import remarkGfm from 'remark-gfm'
 import createMDX from '@next/mdx'
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -14,6 +15,10 @@ console.log('Current NODE_ENV:', process.env.NODE_ENV);
 
 const withMDX = createMDX({
   // Add markdown plugins here, as desired
+  options: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [],
+  },
 })
 
 // Merge MDX config with Next.js config

package.json

@@ -46,6 +46,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
+    "remark-gfm": "^4.0.1",
     "sugar-high": "^0.9.3",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.8",

src/app/globals.css

@@ -58,6 +58,11 @@
   --sh-string: #10B981;
   --sh-keyword: #F472B6;
   --sh-comment: #9CA3AF;
+  /* tables */
+  --color-canvas-default: #ffffff;
+  --color-canvas-subtle: #f6f8fa;
+  --color-border-default: #d0d7de;
+  --color-border-muted: hsla(210, 18%, 87%, 1);
 }
 
 [data-theme='light'] {
@@ -127,6 +132,11 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+  /* tables */
+  --color-canvas-default: var(--navbar-bg);
+  --color-canvas-subtle: var(--background-funding);
+  --color-border-default: #30363d;
+  --color-border-muted: #21262d;
 }
 
 /* Base styles for <a> elements */
@@ -171,6 +181,40 @@ pre {
   overflow-x: auto; /* Handle horizontal overflow for long lines */
 }
 
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  margin-top: 0;
+  margin-bottom: 16px;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+}
+
+tr {
+  background-color: var(--color-canvas-default);
+  border-top: 1px solid var(--color-border-muted);
+}
+
+tr:nth-child(2n) {
+  background-color: var(--color-canvas-subtle);
+}
+
+td,
+th {
+  padding: 6px 13px;
+  border: 1px solid var(--color-border-default);
+}
+
+th {
+  font-weight: 600;
+}
+
+table img {
+  background-color: transparent;
+}
+
 /* Base styles */
 html, body {
   max-width: 100vw;