@astrojs/mdx 0.9.0 → 0.10.2-next.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 5d04eed831bc49e1
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.9.0 build /home/runner/work/astro/astro/packages/integrations/mdx
-@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
-@astrojs/mdx:build: 
+@astrojs/mdx:build: cache hit, replaying output 9bf2042a57eb9fcc
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.10.2-next.0 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
+@astrojs/mdx:build: 

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @astrojs/mdx
 
+## 0.10.2-next.0
+
+### Patch Changes
+
+- [#4423](https://github.com/withastro/astro/pull/4423) [`d4cd7a59f`](https://github.com/withastro/astro/commit/d4cd7a59fd38d411c442a818cfaab40f74106628) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Update Markdown type signature to match new markdown plugin,and update top-level layout props for better alignment
+
+## 0.10.1
+
+### Patch Changes
+
+- [#4443](https://github.com/withastro/astro/pull/4443) [`adb207979`](https://github.com/withastro/astro/commit/adb20797962c280d4d38f335f577fd52a1b48d4b) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Fix MDX style imports when layout is not applied
+
+* [#4428](https://github.com/withastro/astro/pull/4428) [`a2414bf59`](https://github.com/withastro/astro/commit/a2414bf59e2e2cd633aece68e724401c4ad281b9) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Fix dev server reload performance when globbing from an MDX layout
+
+## 0.10.0
+
+### Minor Changes
+
+- [#4292](https://github.com/withastro/astro/pull/4292) [`f1a52c18a`](https://github.com/withastro/astro/commit/f1a52c18afe66e6d310743ae6884be76f69be265) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Switch from Shiki Twoslash to Astro's Shiki Markdown highlighter
+
 ## 0.9.0
 
 ### Minor Changes

package/README.md

@@ -26,11 +26,11 @@ The `astro add` command-line tool automates the installation for you. Run one of
 
 ```sh
 # Using NPM
-npx astro add mdx
+npm run astro add mdx
 # Using Yarn
 yarn astro add mdx
 # Using PNPM
-pnpx astro add mdx
+pnpm astro add mdx
 ```
 
 Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
@@ -253,7 +253,7 @@ const { title, fancyJsHelper } = Astro.props;
 
 The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting).
 
-We will highlight your code blocks with [Shiki](https://github.com/shikijs/shiki) by default [using Shiki twoslash](https://shikijs.github.io/twoslash/). You can customize [this remark plugin](https://www.npmjs.com/package/remark-shiki-twoslash) using the `markdown.shikiConfig` option in your `astro.config`. For example, you can apply a different built-in theme like so:
+We will highlight your code blocks with [Shiki](https://github.com/shikijs/shiki) by default. You can customize this highlighter using the `markdown.shikiConfig` option in your `astro.config`. For example, you can apply a different built-in theme like so:
 
 ```js
 // astro.config.mjs
@@ -285,6 +285,23 @@ export default {
 
 This applies a minimal Prism renderer with added support for `astro` code blocks. Visit [our "Prism configuration" docs](https://docs.astro.build/en/guides/markdown-content/#prism-configuration) for more on using Prism with Astro.
 
+#### Switch to a custom syntax highlighter
+
+You may want to apply your own syntax highlighter too. If your highlighter offers a remark or rehype plugin, you can flip off our syntax highlighting by setting `markdown.syntaxHighlight: false` and wiring up your plugin. For example, say you want to apply [Shiki Twoslash's remark plugin](https://www.npmjs.com/package/remark-shiki-twoslash):
+
+```js
+// astro.config.mjs
+import shikiTwoslash from 'remark-shiki-twoslash';
+
+export default {
+  markdown: {
+  syntaxHighlight: false,
+  },
+  integrations: [mdx({
+    remarkPlugins: [shikiTwoslash, { /* Shiki Twoslash config */ }],
+  })],
+```
+
 ## Configuration
 
 ### remarkPlugins

package/dist/astro-data-utils.js

@@ -18,9 +18,9 @@ function rehypeApplyFrontmatterExport(pageFrontmatter) {
       exportNodes.unshift(
         jsToTreeNode(
           `import { jsx as layoutJsx } from 'astro/jsx-runtime';
-				import Layout from ${JSON.stringify(frontmatter.layout)};
 				
-				export default function ({ children }) {
+				export default async function ({ children }) {
+					const Layout = (await import(${JSON.stringify(frontmatter.layout)})).default;
 					const { layout, ...content } = frontmatter;
 					content.file = file;
 					content.url = url;
@@ -41,6 +41,8 @@ function rehypeApplyFrontmatterExport(pageFrontmatter) {
 						}
 					});
 					return layoutJsx(Layout, {
+						file,
+						url,
 						content,
 						frontmatter: content,
 						headings: getHeadings(),

package/dist/index.js

@@ -3,12 +3,12 @@ import mdxPlugin from "@mdx-js/rollup";
 import { parse as parseESM } from "es-module-lexer";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
-import remarkShikiTwoslash from "remark-shiki-twoslash";
 import remarkSmartypants from "remark-smartypants";
 import { VFile } from "vfile";
 import { rehypeApplyFrontmatterExport, remarkInitializeAstroData } from "./astro-data-utils.js";
 import rehypeCollectHeadings from "./rehype-collect-headings.js";
 import remarkPrism from "./remark-prism.js";
+import remarkShiki from "./remark-shiki.js";
 import { getFileInfo, parseFrontmatter } from "./utils.js";
 const DEFAULT_REMARK_PLUGINS = [
   remarkGfm,
@@ -22,14 +22,13 @@ function handleExtends(config, defaults = []) {
     return config;
   return [...defaults, ...(config == null ? void 0 : config.extends) ?? []];
 }
-function getRemarkPlugins(mdxOptions, config) {
+async function getRemarkPlugins(mdxOptions, config) {
   let remarkPlugins = [
     remarkInitializeAstroData,
     ...handleExtends(mdxOptions.remarkPlugins, DEFAULT_REMARK_PLUGINS)
   ];
   if (config.markdown.syntaxHighlight === "shiki") {
-    const shikiTwoslash = remarkShikiTwoslash.default ?? remarkShikiTwoslash;
-    remarkPlugins.push([shikiTwoslash, config.markdown.shikiConfig]);
+    remarkPlugins.push([await remarkShiki(config.markdown.shikiConfig)]);
   }
   if (config.markdown.syntaxHighlight === "prism") {
     remarkPlugins.push(remarkPrism);
@@ -37,10 +36,10 @@ function getRemarkPlugins(mdxOptions, config) {
   return remarkPlugins;
 }
 function getRehypePlugins(mdxOptions, config) {
-  let rehypePlugins = handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS);
-  if (config.markdown.syntaxHighlight === "shiki" || config.markdown.syntaxHighlight === "prism") {
-    rehypePlugins.unshift([rehypeRaw, { passThrough: nodeTypes }]);
-  }
+  let rehypePlugins = [
+    [rehypeRaw, { passThrough: nodeTypes }],
+    ...handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS)
+  ];
   rehypePlugins.unshift(rehypeCollectHeadings);
   return rehypePlugins;
 }
@@ -48,10 +47,10 @@ function mdx(mdxOptions = {}) {
   return {
     name: "@astrojs/mdx",
     hooks: {
-      "astro:config:setup": ({ updateConfig, config, addPageExtension, command }) => {
+      "astro:config:setup": async ({ updateConfig, config, addPageExtension, command }) => {
         addPageExtension(".mdx");
         const mdxPluginOpts = {
-          remarkPlugins: getRemarkPlugins(mdxOptions, config),
+          remarkPlugins: await getRemarkPlugins(mdxOptions, config),
           rehypePlugins: getRehypePlugins(mdxOptions, config),
           jsx: true,
           jsxImportSource: "astro",
@@ -86,6 +85,8 @@ function mdx(mdxOptions = {}) {
                 transform(code, id) {
                   if (!id.endsWith(".mdx"))
                     return;
+                  code += `
+MDXContent[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;
                   const [, moduleExports] = parseESM(code);
                   const { fileUrl, fileId } = getFileInfo(id, config);
                   if (!moduleExports.includes("url")) {

package/dist/remark-shiki.d.ts

@@ -0,0 +1,3 @@
+import type { ShikiConfig } from 'astro';
+declare const remarkShiki: ({ langs, theme, wrap }: ShikiConfig) => Promise<() => (tree: any) => void>;
+export default remarkShiki;

package/dist/remark-shiki.js

@@ -0,0 +1,58 @@
+import { getHighlighter } from "shiki";
+import { visit } from "unist-util-visit";
+const highlighterCacheAsync = /* @__PURE__ */ new Map();
+const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false }) => {
+  const cacheID = typeof theme === "string" ? theme : theme.name;
+  let highlighterAsync = highlighterCacheAsync.get(cacheID);
+  if (!highlighterAsync) {
+    highlighterAsync = getHighlighter({ theme });
+    highlighterCacheAsync.set(cacheID, highlighterAsync);
+  }
+  const highlighter = await highlighterAsync;
+  for (const lang of langs) {
+    await highlighter.loadLanguage(lang);
+  }
+  return () => (tree) => {
+    visit(tree, "code", (node) => {
+      let lang;
+      if (typeof node.lang === "string") {
+        const langExists = highlighter.getLoadedLanguages().includes(node.lang);
+        if (langExists) {
+          lang = node.lang;
+        } else {
+          console.warn(`The language "${node.lang}" doesn't exist, falling back to plaintext.`);
+          lang = "plaintext";
+        }
+      } else {
+        lang = "plaintext";
+      }
+      let html = highlighter.codeToHtml(node.value, { lang });
+      html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
+      html = html.replace(
+        /style="(background-)?color: var\(--shiki-/g,
+        'style="$1color: var(--astro-code-'
+      );
+      if (node.lang === "diff") {
+        html = html.replace(
+          /<span class="line"><span style="(.*?)">([\+|\-])/g,
+          '<span class="line"><span style="$1"><span style="user-select: none;">$2</span>'
+        );
+      }
+      if (wrap === false) {
+        html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
+      } else if (wrap === true) {
+        html = html.replace(
+          /style="(.*?)"/,
+          'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
+        );
+      }
+      node.type = "html";
+      node.value = html;
+      node.children = [];
+    });
+  };
+};
+var remark_shiki_default = remarkShiki;
+export {
+  remark_shiki_default as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.9.0",
+  "version": "0.10.2-next.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -33,7 +33,6 @@
     "rehype-raw": "^6.1.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "remark-shiki-twoslash": "^3.1.0",
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.10.1",
     "unist-util-visit": "^4.1.0",
@@ -43,13 +42,14 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.0.4",
+    "astro": "1.1.0-next.0",
     "astro-scripts": "0.0.7",
     "chai": "^4.3.6",
     "linkedom": "^0.14.12",
     "mdast-util-to-string": "^3.1.0",
     "mocha": "^9.2.2",
     "reading-time": "^1.5.0",
+    "remark-shiki-twoslash": "^3.1.0",
     "remark-toc": "^8.0.1"
   },
   "engines": {

package/src/astro-data-utils.ts

@@ -20,13 +20,17 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
 			jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`),
 		];
 		if (frontmatter.layout) {
+			// NOTE(bholmesdev) 08-22-2022
+			// Using an async layout import (i.e. `const Layout = (await import...)`)
+			// Preserves the dev server import cache when globbing a large set of MDX files
+			// Full explanation: 'https://github.com/withastro/astro/pull/4428'
 			exportNodes.unshift(
 				jsToTreeNode(
 					/** @see 'vite-plugin-markdown' for layout props reference */
 					`import { jsx as layoutJsx } from 'astro/jsx-runtime';
-				import Layout from ${JSON.stringify(frontmatter.layout)};
 				
-				export default function ({ children }) {
+				export default async function ({ children }) {
+					const Layout = (await import(${JSON.stringify(frontmatter.layout)})).default;
 					const { layout, ...content } = frontmatter;
 					content.file = file;
 					content.url = url;
@@ -47,6 +51,8 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
 						}
 					});
 					return layoutJsx(Layout, {
+						file,
+						url,
 						content,
 						frontmatter: content,
 						headings: getHeadings(),

package/src/index.ts

@@ -4,13 +4,13 @@ import type { AstroConfig, AstroIntegration } from 'astro';
 import { parse as parseESM } from 'es-module-lexer';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
-import remarkShikiTwoslash from 'remark-shiki-twoslash';
 import remarkSmartypants from 'remark-smartypants';
 import { VFile } from 'vfile';
 import type { Plugin as VitePlugin } from 'vite';
 import { rehypeApplyFrontmatterExport, remarkInitializeAstroData } from './astro-data-utils.js';
 import rehypeCollectHeadings from './rehype-collect-headings.js';
 import remarkPrism from './remark-prism.js';
+import remarkShiki from './remark-shiki.js';
 import { getFileInfo, parseFrontmatter } from './utils.js';
 
 type WithExtends<T> = T | { extends: T };
@@ -38,22 +38,17 @@ function handleExtends<T>(config: WithExtends<T[] | undefined>, defaults: T[] =
 	return [...defaults, ...(config?.extends ?? [])];
 }
 
-function getRemarkPlugins(
+async function getRemarkPlugins(
 	mdxOptions: MdxOptions,
 	config: AstroConfig
-): MdxRollupPluginOptions['remarkPlugins'] {
+): Promise<MdxRollupPluginOptions['remarkPlugins']> {
 	let remarkPlugins = [
 		// Initialize vfile.data.astroExports before all plugins are run
 		remarkInitializeAstroData,
 		...handleExtends(mdxOptions.remarkPlugins, DEFAULT_REMARK_PLUGINS),
 	];
 	if (config.markdown.syntaxHighlight === 'shiki') {
-		// Default export still requires ".default" chaining for some reason
-		// Workarounds tried:
-		// - "import * as remarkShikiTwoslash"
-		// - "import { default as remarkShikiTwoslash }"
-		const shikiTwoslash = (remarkShikiTwoslash as any).default ?? remarkShikiTwoslash;
-		remarkPlugins.push([shikiTwoslash, config.markdown.shikiConfig]);
+		remarkPlugins.push([await remarkShiki(config.markdown.shikiConfig)]);
 	}
 	if (config.markdown.syntaxHighlight === 'prism') {
 		remarkPlugins.push(remarkPrism);
@@ -65,11 +60,11 @@ function getRehypePlugins(
 	mdxOptions: MdxOptions,
 	config: AstroConfig
 ): MdxRollupPluginOptions['rehypePlugins'] {
-	let rehypePlugins = handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS);
+	let rehypePlugins = [
+		[rehypeRaw, { passThrough: nodeTypes }] as any,
+		...handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS),
+	];
 
-	if (config.markdown.syntaxHighlight === 'shiki' || config.markdown.syntaxHighlight === 'prism') {
-		rehypePlugins.unshift([rehypeRaw, { passThrough: nodeTypes }]);
-	}
 	// getHeadings() is guaranteed by TS, so we can't allow user to override
 	rehypePlugins.unshift(rehypeCollectHeadings);
 
@@ -80,11 +75,11 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 	return {
 		name: '@astrojs/mdx',
 		hooks: {
-			'astro:config:setup': ({ updateConfig, config, addPageExtension, command }: any) => {
+			'astro:config:setup': async ({ updateConfig, config, addPageExtension, command }: any) => {
 				addPageExtension('.mdx');
 
 				const mdxPluginOpts: MdxRollupPluginOptions = {
-					remarkPlugins: getRemarkPlugins(mdxOptions, config),
+					remarkPlugins: await getRemarkPlugins(mdxOptions, config),
 					rehypePlugins: getRehypePlugins(mdxOptions, config),
 					jsx: true,
 					jsxImportSource: 'astro',
@@ -124,6 +119,11 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 								// These transforms must happen *after* JSX runtime transformations
 								transform(code, id) {
 									if (!id.endsWith('.mdx')) return;
+
+									// Ensures styles and scripts are injected into a `<head>`
+									// When a layout is not applied
+									code += `\nMDXContent[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;
+
 									const [, moduleExports] = parseESM(code);
 
 									const { fileUrl, fileId } = getFileInfo(id, config);

package/src/remark-shiki.ts

@@ -0,0 +1,85 @@
+import type { ShikiConfig } from 'astro';
+import type * as shiki from 'shiki';
+import { getHighlighter } from 'shiki';
+import { visit } from 'unist-util-visit';
+
+/**
+ * getHighlighter() is the most expensive step of Shiki. Instead of calling it on every page,
+ * cache it here as much as possible. Make sure that your highlighters can be cached, state-free.
+ * We make this async, so that multiple calls to parse markdown still share the same highlighter.
+ */
+const highlighterCacheAsync = new Map<string, Promise<shiki.Highlighter>>();
+
+const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
+	const cacheID: string = typeof theme === 'string' ? theme : theme.name;
+	let highlighterAsync = highlighterCacheAsync.get(cacheID);
+	if (!highlighterAsync) {
+		highlighterAsync = getHighlighter({ theme });
+		highlighterCacheAsync.set(cacheID, highlighterAsync);
+	}
+	const highlighter = await highlighterAsync;
+
+	// NOTE: There may be a performance issue here for large sites that use `lang`.
+	// Since this will be called on every page load. Unclear how to fix this.
+	for (const lang of langs) {
+		await highlighter.loadLanguage(lang);
+	}
+
+	return () => (tree: any) => {
+		visit(tree, 'code', (node) => {
+			let lang: string;
+
+			if (typeof node.lang === 'string') {
+				const langExists = highlighter.getLoadedLanguages().includes(node.lang);
+				if (langExists) {
+					lang = node.lang;
+				} else {
+					// eslint-disable-next-line no-console
+					console.warn(`The language "${node.lang}" doesn't exist, falling back to plaintext.`);
+					lang = 'plaintext';
+				}
+			} else {
+				lang = 'plaintext';
+			}
+
+			let html = highlighter!.codeToHtml(node.value, { lang });
+
+			// Q: Couldn't these regexes match on a user's inputted code blocks?
+			// A: Nope! All rendered HTML is properly escaped.
+			// Ex. If a user typed `<span class="line"` into a code block,
+			// It would become this before hitting our regexes:
+			// &lt;span class=&quot;line&quot;
+
+			// Replace "shiki" class naming with "astro".
+			html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
+			// Replace "shiki" css variable naming with "astro".
+			html = html.replace(
+				/style="(background-)?color: var\(--shiki-/g,
+				'style="$1color: var(--astro-code-'
+			);
+			// Add "user-select: none;" for "+"/"-" diff symbols
+			if (node.lang === 'diff') {
+				html = html.replace(
+					/<span class="line"><span style="(.*?)">([\+|\-])/g,
+					'<span class="line"><span style="$1"><span style="user-select: none;">$2</span>'
+				);
+			}
+			// Handle code wrapping
+			// if wrap=null, do nothing.
+			if (wrap === false) {
+				html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
+			} else if (wrap === true) {
+				html = html.replace(
+					/style="(.*?)"/,
+					'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
+				);
+			}
+
+			node.type = 'html';
+			node.value = html;
+			node.children = [];
+		});
+	};
+};
+
+export default remarkShiki;

package/test/fixtures/mdx-frontmatter/src/layouts/Base.astro

@@ -1,6 +1,8 @@
 ---
 const {
 	content = { title: "content didn't work" },
+	file = "file didn't work",
+	url = "url didn't work",
 	frontmatter = {
 		title: "frontmatter didn't work",
 		file: "file didn't work",
@@ -24,6 +26,8 @@ const {
 	<p data-frontmatter-title>{frontmatter.title}</p>
 	<p data-frontmatter-file>{frontmatter.file}</p>
 	<p data-frontmatter-url>{frontmatter.url}</p>
+	<p data-file>{frontmatter.file}</p>
+	<p data-url>{frontmatter.url}</p>
 	<p data-layout-rendered>Layout rendered!</p>
 	<ul data-headings>
 		{headings.map(heading => <li>{heading.slug}</li>)}

package/test/fixtures/mdx-page/src/pages/index.mdx

@@ -1 +1,3 @@
+import '../styles.css'
+
 # Hello page!

package/test/fixtures/mdx-page/src/styles.css

@@ -0,0 +1,3 @@
+p {
+	color: red;
+}

package/test/mdx-frontmatter.test.js

@@ -57,17 +57,21 @@ describe('MDX frontmatter', () => {
 		expect(headingSlugs).to.contain('section-2');
 	});
 
-	it('passes "file" and "url" to layout via frontmatter', async () => {
+	it('passes "file" and "url" to layout', async () => {
 		const html = await fixture.readFile('/with-headings/index.html');
 		const { document } = parseHTML(html);
 
 		const frontmatterFile = document.querySelector('[data-frontmatter-file]')?.textContent;
 		const frontmatterUrl = document.querySelector('[data-frontmatter-url]')?.textContent;
+		const file = document.querySelector('[data-file]')?.textContent;
+		const url = document.querySelector('[data-url]')?.textContent;
 
 		expect(frontmatterFile?.endsWith('with-headings.mdx')).to.equal(
 			true,
 			'"file" prop does not end with correct path or is undefined'
 		);
 		expect(frontmatterUrl).to.equal('/with-headings');
+		expect(file).to.equal(frontmatterFile);
+		expect(url).to.equal(frontmatterUrl);
 	});
 });

package/test/mdx-page.test.js

@@ -26,6 +26,15 @@ describe('MDX Page', () => {
 
 			expect(h1.textContent).to.equal('Hello page!');
 		});
+
+		it('injects style imports when layout is not applied', async () => {
+			const html = await fixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+
+			const stylesheet = document.querySelector('link[rel="stylesheet"]');
+
+			expect(stylesheet).to.not.be.null;
+		});
 	});
 
 	describe('dev', () => {

package/test/mdx-syntax-highlighting.test.js

@@ -3,6 +3,7 @@ import mdx from '@astrojs/mdx';
 import { expect } from 'chai';
 import { parseHTML } from 'linkedom';
 import { loadFixture } from '../../../astro/test/test-utils.js';
+import shikiTwoslash from 'remark-shiki-twoslash';
 
 const FIXTURE_ROOT = new URL('./fixtures/mdx-syntax-hightlighting/', import.meta.url);
 
@@ -21,8 +22,9 @@ describe('MDX syntax highlighting', () => {
 			const html = await fixture.readFile('/index.html');
 			const { document } = parseHTML(html);
 
-			const shikiCodeBlock = document.querySelector('pre.shiki');
+			const shikiCodeBlock = document.querySelector('pre.astro-code');
 			expect(shikiCodeBlock).to.not.be.null;
+			expect(shikiCodeBlock.getAttribute('style')).to.contain('background-color:#0d1117');
 		});
 
 		it('respects markdown.shikiConfig.theme', async () => {
@@ -41,8 +43,9 @@ describe('MDX syntax highlighting', () => {
 			const html = await fixture.readFile('/index.html');
 			const { document } = parseHTML(html);
 
-			const shikiCodeBlock = document.querySelector('pre.shiki.dracula');
+			const shikiCodeBlock = document.querySelector('pre.astro-code');
 			expect(shikiCodeBlock).to.not.be.null;
+			expect(shikiCodeBlock.getAttribute('style')).to.contain('background-color:#282A36');
 		});
 	});
 
@@ -64,4 +67,25 @@ describe('MDX syntax highlighting', () => {
 			expect(prismCodeBlock).to.not.be.null;
 		});
 	});
+
+	it('supports custom highlighter - shiki-twoslash', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			markdown: {
+				syntaxHighlight: false,
+			},
+			integrations: [
+				mdx({
+					remarkPlugins: [shikiTwoslash.default ?? shikiTwoslash],
+				}),
+			],
+		});
+		await fixture.build();
+
+		const html = await fixture.readFile('/index.html');
+		const { document } = parseHTML(html);
+
+		const twoslashCodeBlock = document.querySelector('pre.shiki');
+		expect(twoslashCodeBlock).to.not.be.null;
+	});
 });