From 03864e9595cbbac6fa6a3362d63020652c9e6daf Mon Sep 17 00:00:00 2001 From: Cedric Vidal Date: Wed, 30 Sep 2026 00:52:23 -0700 Subject: [PATCH] fix(website): render GFM tables in .mdx pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Every table in a .mdx guide currently renders as literal pipe characters. Five published pages are affected — importing-skills, importing-mcp-servers, defining-profiles, importing-extensions and managing-task-prompts — showing readers raw "| Type | When to use |" text instead of a table. Astro applies its built-in GFM support to .md only. MDX inherits the configured `remarkPlugins` — the HTTP snippet plugin demonstrably runs on .mdx pages — but not that built-in, so tables are never parsed there. Listing remark-gfm explicitly restores them. Renaming the affected pages to .md would have been the smaller change, and is wrong: those five are exactly the pages that also use ```http fences, which the snippet plugin turns into a Starlight group. That JSX only renders in .mdx, so the rename trades broken tables for broken tabs. Verified both ways before choosing: in .md a table renders and the tabs vanish; in .mdx with this fix, both render. remark-gfm was already resolved in the lockfile as a transitive dependency, so this promotes it to a direct one and adds no new packages. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 507f8ebd-cc32-489c-afca-8941c5f8dba1 --- website/astro.config.mjs | 9 ++++++++- website/package.json | 3 ++- website/pnpm-lock.yaml | 3 +++ 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/website/astro.config.mjs b/website/astro.config.mjs index c637dd8c7..b060187a2 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -8,6 +8,7 @@ import starlightOpenAPI, { openAPISidebarGroups } from 'starlight-openapi'; import { readFileSync } from 'node:fs'; import { join } from 'node:path'; import { execSync } from 'node:child_process'; +import remarkGfm from 'remark-gfm'; import remarkBasePath from './src/plugins/remark-base-path.mjs'; import remarkHttpSnippets from './src/plugins/remark-http-snippets.mjs'; @@ -56,7 +57,13 @@ export default defineConfig({ output: 'static', server: { port: docPort }, markdown: { - remarkPlugins: [[remarkBasePath, { base }], remarkHttpSnippets], + // remarkGfm is listed explicitly because Astro applies its built-in GFM + // support to .md only. MDX inherits `remarkPlugins` but not that built-in, + // so without this every table in a .mdx page renders as literal pipe + // characters. Splitting content between the two extensions is not an + // option here: the HTTP snippet plugin below emits JSX, which only .mdx + // renders, and several guides need both tables and snippets. + remarkPlugins: [remarkGfm, [remarkBasePath, { base }], remarkHttpSnippets], }, integrations: [ starlight({ diff --git a/website/package.json b/website/package.json index 513b77f94..f2d171e8a 100644 --- a/website/package.json +++ b/website/package.json @@ -20,8 +20,9 @@ "devDependencies": { "acorn": "^8.16.0", "httpsnippet-lite": "^3.0.5", + "remark-gfm": "^4.0.1", "starlight-openapi": "^0.25.1", "unist-util-visit": "^5.1.0", "worktree-env": "^0.1.0" } -} \ No newline at end of file +} diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml index 6781e0fba..9aa3e2dc9 100644 --- a/website/pnpm-lock.yaml +++ b/website/pnpm-lock.yaml @@ -30,6 +30,9 @@ importers: httpsnippet-lite: specifier: ^3.0.5 version: 3.0.5 + remark-gfm: + specifier: ^4.0.1 + version: 4.0.1 starlight-openapi: specifier: ^0.25.1 version: 0.25.1(@astrojs/markdown-remark@7.2.0)(@astrojs/starlight@0.39.2(astro@6.4.8(@types/node@24.12.3)(rollup@4.62.2)))(astro@6.4.8(@types/node@24.12.3)(rollup@4.62.2))(openapi-types@12.1.3)