diff --git a/next.config.ts b/next.config.ts index 9286ce0..75aa237 100644 --- a/next.config.ts +++ b/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 diff --git a/package.json b/package.json index a0f15f2..793f871 100644 --- a/package.json +++ b/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", diff --git a/src/app/globals.css b/src/app/globals.css index 747fbda..d29c41c 100644 --- a/src/app/globals.css +++ b/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 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;