summaryrefslogtreecommitdiff
path: root/packages/integrations/mdx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/integrations/mdx')
-rw-r--r--packages/integrations/mdx/README.md156
-rw-r--r--packages/integrations/mdx/package.json1
-rw-r--r--packages/integrations/mdx/src/index.ts68
-rw-r--r--packages/integrations/mdx/src/plugins.ts57
-rw-r--r--packages/integrations/mdx/test/mdx-plugins.test.js134
-rw-r--r--packages/integrations/mdx/test/mdx-syntax-highlighting.test.js26
6 files changed, 202 insertions, 240 deletions
diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md
index 6b62dc308..8267d80de 100644
--- a/packages/integrations/mdx/README.md
+++ b/packages/integrations/mdx/README.md
@@ -78,116 +78,100 @@ Visit the [MDX docs](https://mdxjs.com/docs/what-is-mdx/) to learn about using s
Once the MDX integration is installed, no configuration is necessary to use `.mdx` files in your Astro project.
-You can extend how your MDX is rendered by adding remark, rehype and recma plugins.
+You can configure how your MDX is rendered with the following options:
-- [`extendPlugins`](#extendplugins)
-- [`remarkRehype`](#remarkrehype)
-- [`remarkPlugins`](#remarkplugins)
-- [`rehypePlugins`](#rehypeplugins)
+- [Options inherited from Markdown config](#options-inherited-from-markdown-config)
+- [`extendMarkdownConfig`](#extendmarkdownconfig)
- [`recmaPlugins`](#recmaplugins)
-### `extendPlugins`
+### Options inherited from Markdown config
-You can customize how MDX files inherit your project’s existing Markdown configuration using the `extendPlugins` option.
+All [`markdown` configuration options](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) except `drafts` can be configured separately in the MDX integration. This includes remark and rehype plugins, syntax highlighting, and more. Options will default to those in your Markdown config ([see the `extendMarkdownConfig` option](#extendmarkdownconfig) to modify this).
-#### `markdown` (default)
+:::note
+There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overriden for MDX files specifically.
+:::
-Astro's MDX files will inherit all [`markdown` options](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) in your Astro configuration file, which includes the [GitHub-Flavored Markdown](https://github.com/remarkjs/remark-gfm) and [Smartypants](https://github.com/silvenon/remark-smartypants) plugins by default.
-
-Any additional plugins you apply in your MDX config will be applied *after* your configured Markdown plugins.
-
-#### `astroDefaults`
-
-Astro's MDX files will apply only [Astro's default plugins](/en/reference/configuration-reference/#markdownextenddefaultplugins), without inheriting the rest of your Markdown config.
-
-This example will apply the default [GitHub-Flavored Markdown](https://github.com/remarkjs/remark-gfm) and [Smartypants](https://github.com/silvenon/remark-smartypants) plugins alongside [`remark-toc`](https://github.com/remarkjs/remark-toc) to your MDX files, while ignoring any `markdown.remarkPlugins` configuration:
-
-```js "extendPlugins: 'astroDefaults'"
+```ts
// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
import remarkToc from 'remark-toc';
+import rehypeMinifyHtml from 'rehype-minify-html';
-export default {
- markdown: {
- remarkPlugins: [/** ignored */]
- },
- integrations: [mdx({
- remarkPlugins: [remarkToc],
- // Astro defaults applied
- extendPlugins: 'astroDefaults',
- })],
-}
+export default defineConfig({
+ integrations: [
+ mdx({
+ syntaxHighlight: 'shiki',
+ shikiConfig: { theme: 'dracula' },
+ remarkPlugins: [remarkToc],
+ rehypePlugins: [rehypeMinifyHtml],
+ remarkRehype: { footnoteLabel: 'Footnotes' },
+ gfm: false,
+ })
+ ]
+})
```
-#### `false`
+:::caution
+MDX does not support passing remark and rehype plugins as a string. You should install, import, and apply the plugin function instead.
+:::
-Astro's MDX files will not inherit any [`markdown` options](https://docs.astro.build/en/reference/configuration-reference/#markdown-options), nor will any Astro Markdown defaults be applied:
+📚 See the [Markdown Options reference](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) for a complete list of options.
-```js "extendPlugins: false"
-// astro.config.mjs
-import remarkToc from 'remark-toc';
-
-export default {
- integrations: [mdx({
- remarkPlugins: [remarkToc],
- // Astro defaults not applied
- extendPlugins: false,
- })],
-}
-```
+### `extendMarkdownConfig`
-### `remarkRehype`
+- **Type:** `boolean`
+- **Default:** `true`
-Markdown content is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options).
+MDX will extend [your project's existing Markdown configuration](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) by default. To override individual options, you can specify their equivalent in your MDX configuration.
-You can set remark-rehype options in your config file:
+For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
-```js
+```ts
// astro.config.mjs
-export default {
- integrations: [mdx({
- remarkRehype: {
- footnoteLabel: 'Catatan kaki',
- footnoteBackLabel: 'Kembali ke konten',
- },
- })],
-};
-```
-This inherits the configuration of [`markdown.remarkRehype`](https://docs.astro.build/en/reference/configuration-reference/#markdownremarkrehype). This behavior can be changed by configuring `extendPlugins`.
-
-### `remarkPlugins`
-
-Browse [awesome-remark](https://github.com/remarkjs/awesome-remark) for a full curated list of [remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) to extend your Markdown's capabilities.
-
-This example applies the [`remark-toc`](https://github.com/remarkjs/remark-toc) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins).
-
-```js
-// astro.config.mjs
-import remarkToc from 'remark-toc';
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
-export default {
- integrations: [mdx({
- remarkPlugins: [remarkToc],
- })],
-}
+export default defineConfig({
+ markdown: {
+ syntaxHighlight: 'prism',
+ remarkPlugins: [remarkPlugin1],
+ gfm: true,
+ },
+ integrations: [
+ mdx({
+ // `syntaxHighlight` inherited from Markdown
+
+ // Markdown `remarkPlugins` ignored,
+ // only `remarkPlugin2` applied.
+ remarkPlugins: [remarkPlugin2],
+ // `gfm` overridden to `false`
+ gfm: false,
+ })
+ ]
+});
```
-### `rehypePlugins`
-
- Browse [awesome-rehype](https://github.com/rehypejs/awesome-rehype) for a full curated list of [Rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) to transform the HTML that your Markdown generates.
+You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
-We apply our own (non-removable) [`collect-headings`](https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/rehype-collect-headings.ts) plugin. This applies IDs to all headings (i.e. `h1 -> h6`) in your MDX files to [link to headings via anchor tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page).
-
-This example applies the [`rehype-accessible-emojis`](https://www.npmjs.com/package/rehype-accessible-emojis) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins).
-
-```js
+```ts
// astro.config.mjs
-import rehypeAccessibleEmojis from 'rehype-accessible-emojis';
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
-export default {
- integrations: [mdx({
- rehypePlugins: [rehypeAccessibleEmojis],
- })],
-}
+export default defineConfig({
+ markdown: {
+ remarkPlugins: [remarkPlugin1],
+ },
+ integrations: [
+ mdx({
+ // Markdown config now ignored
+ extendMarkdownConfig: false,
+ // No `remarkPlugins` applied
+ })
+ ]
+});
```
### `recmaPlugins`
diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json
index 820b61775..f83bfa822 100644
--- a/packages/integrations/mdx/package.json
+++ b/packages/integrations/mdx/package.json
@@ -43,7 +43,6 @@
"rehype-raw": "^6.1.1",
"remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1",
- "remark-smartypants": "^2.0.0",
"shiki": "^0.11.1",
"unist-util-visit": "^4.1.0",
"vfile": "^5.3.2"
diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts
index e9d81ca1f..2fcc89731 100644
--- a/packages/integrations/mdx/src/index.ts
+++ b/packages/integrations/mdx/src/index.ts
@@ -1,4 +1,5 @@
import { toRemarkInitializeAstroData } from '@astrojs/markdown-remark/dist/internal.js';
+import { markdownConfigDefaults } from '@astrojs/markdown-remark';
import { compile as mdxCompile } from '@mdx-js/mdx';
import { PluggableList } from '@mdx-js/mdx/lib/core.js';
import mdxPlugin, { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
@@ -17,44 +18,41 @@ const RAW_CONTENT_ERROR =
const COMPILED_CONTENT_ERROR =
'MDX does not support compiledContent()! If you need to read the HTML contents to calculate values (ex. reading time), we suggest injecting frontmatter via rehype plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins';
-export type MdxOptions = {
- remarkPlugins?: PluggableList;
- rehypePlugins?: PluggableList;
- recmaPlugins?: PluggableList;
- /**
- * Choose which remark and rehype plugins to inherit, if any.
- *
- * - "markdown" (default) - inherit your project’s markdown plugin config ([see Markdown docs](https://docs.astro.build/en/guides/markdown-content/#configuring-markdown))
- * - "astroDefaults" - inherit Astro’s default plugins only ([see defaults](https://docs.astro.build/en/reference/configuration-reference/#markdownextenddefaultplugins))
- * - false - do not inherit any plugins
- */
- extendPlugins?: 'markdown' | 'astroDefaults' | false;
- remarkRehype?: RemarkRehypeOptions;
+export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & {
+ extendMarkdownConfig: boolean;
+ recmaPlugins: PluggableList;
+ // Markdown allows strings as remark and rehype plugins.
+ // This is not supported by the MDX compiler, so override types here.
+ remarkPlugins: PluggableList;
+ rehypePlugins: PluggableList;
+ remarkRehype: RemarkRehypeOptions;
};
-export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
+export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroIntegration {
return {
name: '@astrojs/mdx',
hooks: {
'astro:config:setup': async ({ updateConfig, config, addPageExtension, command }: any) => {
addPageExtension('.mdx');
- mdxOptions.extendPlugins ??= 'markdown';
- const remarkRehypeOptions = {
- ...(mdxOptions.extendPlugins === 'markdown' ? config.markdown.remarkRehype : {}),
- ...mdxOptions.remarkRehype,
- };
+ const extendMarkdownConfig =
+ partialMdxOptions.extendMarkdownConfig ?? defaultOptions.extendMarkdownConfig;
+
+ const mdxOptions = applyDefaultOptions({
+ options: partialMdxOptions,
+ defaults: extendMarkdownConfig ? config.markdown : defaultOptions,
+ });
const mdxPluginOpts: MdxRollupPluginOptions = {
remarkPlugins: await getRemarkPlugins(mdxOptions, config),
- rehypePlugins: getRehypePlugins(mdxOptions, config),
+ rehypePlugins: getRehypePlugins(mdxOptions),
recmaPlugins: mdxOptions.recmaPlugins,
+ remarkRehypeOptions: mdxOptions.remarkRehype,
jsx: true,
jsxImportSource: 'astro',
// Note: disable `.md` (and other alternative extensions for markdown files like `.markdown`) support
format: 'mdx',
mdExtensions: [],
- remarkRehypeOptions,
};
let importMetaEnv: Record<string, any> = {
@@ -166,6 +164,34 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
};
}
+const defaultOptions: MdxOptions = {
+ ...markdownConfigDefaults,
+ extendMarkdownConfig: true,
+ recmaPlugins: [],
+ remarkPlugins: [],
+ rehypePlugins: [],
+ remarkRehype: {},
+};
+
+function applyDefaultOptions({
+ options,
+ defaults,
+}: {
+ options: Partial<MdxOptions>;
+ defaults: MdxOptions;
+}): MdxOptions {
+ return {
+ syntaxHighlight: options.syntaxHighlight ?? defaults.syntaxHighlight,
+ extendMarkdownConfig: options.extendMarkdownConfig ?? defaults.extendMarkdownConfig,
+ recmaPlugins: options.recmaPlugins ?? defaults.recmaPlugins,
+ remarkRehype: options.remarkRehype ?? defaults.remarkRehype,
+ gfm: options.gfm ?? defaults.gfm,
+ remarkPlugins: options.remarkPlugins ?? defaults.remarkPlugins,
+ rehypePlugins: options.rehypePlugins ?? defaults.rehypePlugins,
+ shikiConfig: options.shikiConfig ?? defaults.shikiConfig,
+ };
+}
+
// Converts the first dot in `import.meta.env` to its Unicode escape sequence,
// which prevents Vite from replacing strings like `import.meta.env.SITE`
// in our JS representation of loaded Markdown files
diff --git a/packages/integrations/mdx/src/plugins.ts b/packages/integrations/mdx/src/plugins.ts
index 675a8a645..f5557b8a3 100644
--- a/packages/integrations/mdx/src/plugins.ts
+++ b/packages/integrations/mdx/src/plugins.ts
@@ -14,7 +14,6 @@ import type { Image } from 'mdast';
import { pathToFileURL } from 'node:url';
import rehypeRaw from 'rehype-raw';
import remarkGfm from 'remark-gfm';
-import remarkSmartypants from 'remark-smartypants';
import { visit } from 'unist-util-visit';
import type { VFile } from 'vfile';
import { MdxOptions } from './index.js';
@@ -140,36 +139,22 @@ function toRemarkContentRelImageError({ srcDir }: { srcDir: URL }) {
};
}
-const DEFAULT_REMARK_PLUGINS: PluggableList = [remarkGfm, remarkSmartypants];
-const DEFAULT_REHYPE_PLUGINS: PluggableList = [];
-
export async function getRemarkPlugins(
mdxOptions: MdxOptions,
config: AstroConfig
): Promise<MdxRollupPluginOptions['remarkPlugins']> {
let remarkPlugins: PluggableList = [];
- switch (mdxOptions.extendPlugins) {
- case false:
- break;
- case 'astroDefaults':
- remarkPlugins = [...remarkPlugins, ...DEFAULT_REMARK_PLUGINS];
- break;
- default:
- remarkPlugins = [
- ...remarkPlugins,
- ...(markdownShouldExtendDefaultPlugins(config) ? DEFAULT_REMARK_PLUGINS : []),
- ...ignoreStringPlugins(config.markdown.remarkPlugins ?? []),
- ];
- break;
- }
- if (config.markdown.syntaxHighlight === 'shiki') {
- remarkPlugins.push([await remarkShiki(config.markdown.shikiConfig)]);
+ if (mdxOptions.syntaxHighlight === 'shiki') {
+ remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
}
- if (config.markdown.syntaxHighlight === 'prism') {
+ if (mdxOptions.syntaxHighlight === 'prism') {
remarkPlugins.push(remarkPrism);
}
+ if (mdxOptions.gfm) {
+ remarkPlugins.push(remarkGfm);
+ }
- remarkPlugins = [...remarkPlugins, ...(mdxOptions.remarkPlugins ?? [])];
+ remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)];
// Apply last in case user plugins resolve relative image paths
if (config.experimental.contentCollections) {
@@ -178,34 +163,17 @@ export async function getRemarkPlugins(
return remarkPlugins;
}
-export function getRehypePlugins(
- mdxOptions: MdxOptions,
- config: AstroConfig
-): MdxRollupPluginOptions['rehypePlugins'] {
+export function getRehypePlugins(mdxOptions: MdxOptions): MdxRollupPluginOptions['rehypePlugins'] {
let rehypePlugins: PluggableList = [
// ensure `data.meta` is preserved in `properties.metastring` for rehype syntax highlighters
rehypeMetaString,
// rehypeRaw allows custom syntax highlighters to work without added config
[rehypeRaw, { passThrough: nodeTypes }] as any,
];
- switch (mdxOptions.extendPlugins) {
- case false:
- break;
- case 'astroDefaults':
- rehypePlugins = [...rehypePlugins, ...DEFAULT_REHYPE_PLUGINS];
- break;
- default:
- rehypePlugins = [
- ...rehypePlugins,
- ...(markdownShouldExtendDefaultPlugins(config) ? DEFAULT_REHYPE_PLUGINS : []),
- ...ignoreStringPlugins(config.markdown.rehypePlugins ?? []),
- ];
- break;
- }
rehypePlugins = [
...rehypePlugins,
- ...(mdxOptions.rehypePlugins ?? []),
+ ...ignoreStringPlugins(mdxOptions.rehypePlugins),
// getHeadings() is guaranteed by TS, so this must be included.
// We run `rehypeHeadingIds` _last_ to respect any custom IDs set by user plugins.
rehypeHeadingIds,
@@ -216,13 +184,6 @@ export function getRehypePlugins(
return rehypePlugins;
}
-function markdownShouldExtendDefaultPlugins(config: AstroConfig): boolean {
- return (
- config.markdown.extendDefaultPlugins ||
- (config.markdown.remarkPlugins.length === 0 && config.markdown.rehypePlugins.length === 0)
- );
-}
-
function ignoreStringPlugins(plugins: any[]) {
let validPlugins: PluggableList = [];
let hasInvalidPlugin = false;
diff --git a/packages/integrations/mdx/test/mdx-plugins.test.js b/packages/integrations/mdx/test/mdx-plugins.test.js
index a077fde45..f74ded3ea 100644
--- a/packages/integrations/mdx/test/mdx-plugins.test.js
+++ b/packages/integrations/mdx/test/mdx-plugins.test.js
@@ -80,91 +80,57 @@ describe('MDX plugins', () => {
expect(selectTocLink(document)).to.be.null;
});
- it('respects "extendDefaultPlugins" when extending markdown', async () => {
- const fixture = await buildFixture({
- markdown: {
- remarkPlugins: [remarkExamplePlugin],
- rehypePlugins: [rehypeExamplePlugin],
- extendDefaultPlugins: true,
- },
- integrations: [mdx()],
- });
-
- const html = await fixture.readFile(FILE);
- const { document } = parseHTML(html);
-
- expect(selectRemarkExample(document)).to.not.be.null;
- expect(selectRehypeExample(document)).to.not.be.null;
- expect(selectGfmLink(document)).to.not.be.null;
- });
-
- it('extends markdown config with extendPlugins: "markdown"', async () => {
- const fixture = await buildFixture({
- markdown: {
- remarkPlugins: [remarkExamplePlugin],
- rehypePlugins: [rehypeExamplePlugin],
- },
- integrations: [
- mdx({
- extendPlugins: 'markdown',
- remarkPlugins: [remarkToc],
- }),
- ],
- });
-
- const html = await fixture.readFile(FILE);
- const { document } = parseHTML(html);
-
- expect(selectRemarkExample(document)).to.not.be.null;
- expect(selectRehypeExample(document)).to.not.be.null;
- expect(selectTocLink(document)).to.not.be.null;
- });
-
- it('extends default plugins with extendPlugins: "astroDefaults"', async () => {
- const fixture = await buildFixture({
- markdown: {
- // should NOT be applied to MDX
- remarkPlugins: [remarkToc],
- },
- integrations: [
- mdx({
- remarkPlugins: [remarkExamplePlugin],
- rehypePlugins: [rehypeExamplePlugin],
- extendPlugins: 'astroDefaults',
- }),
- ],
- });
-
- const html = await fixture.readFile(FILE);
- const { document } = parseHTML(html);
-
- expect(selectGfmLink(document)).to.not.be.null;
- // remark and rehype plugins still respected
- expect(selectRemarkExample(document)).to.not.be.null;
- expect(selectRehypeExample(document)).to.not.be.null;
- // Does NOT inherit TOC from markdown config
- expect(selectTocLink(document)).to.be.null;
- });
-
- it('does not extend default plugins with extendPlugins: false', async () => {
- const fixture = await buildFixture({
- markdown: {
- remarkPlugins: [remarkExamplePlugin],
- },
- integrations: [
- mdx({
- remarkPlugins: [],
- extendPlugins: false,
- }),
- ],
+ for (const extendMarkdownConfig of [true, false]) {
+ describe(`extendMarkdownConfig = ${extendMarkdownConfig}`, () => {
+ let fixture;
+ before(async () => {
+ fixture = await buildFixture({
+ markdown: {
+ remarkPlugins: [remarkToc],
+ gfm: false,
+ },
+ integrations: [
+ mdx({
+ extendMarkdownConfig,
+ remarkPlugins: [remarkExamplePlugin],
+ rehypePlugins: [rehypeExamplePlugin],
+ }),
+ ],
+ });
+ });
+
+ it('Handles MDX plugins', async () => {
+ const html = await fixture.readFile(FILE);
+ const { document } = parseHTML(html);
+
+ expect(selectRemarkExample(document, 'MDX remark plugins not applied.')).to.not.be.null;
+ expect(selectRehypeExample(document, 'MDX rehype plugins not applied.')).to.not.be.null;
+ });
+
+ it('Handles Markdown plugins', async () => {
+ const html = await fixture.readFile(FILE);
+ const { document } = parseHTML(html);
+
+ expect(
+ selectTocLink(
+ document,
+ '`remarkToc` plugin applied unexpectedly. Should override Markdown config.'
+ )
+ ).to.be.null;
+ });
+
+ it('Handles gfm', async () => {
+ const html = await fixture.readFile(FILE);
+ const { document } = parseHTML(html);
+
+ if (extendMarkdownConfig === true) {
+ expect(selectGfmLink(document), 'Does not respect `markdown.gfm` option.').to.be.null;
+ } else {
+ expect(selectGfmLink(document), 'Respects `markdown.gfm` unexpectedly.').to.not.be.null;
+ }
+ });
});
-
- const html = await fixture.readFile(FILE);
- const { document } = parseHTML(html);
-
- expect(selectGfmLink(document)).to.be.null;
- expect(selectRemarkExample(document)).to.be.null;
- });
+ }
it('supports custom recma plugins', async () => {
const fixture = await buildFixture({
diff --git a/packages/integrations/mdx/test/mdx-syntax-highlighting.test.js b/packages/integrations/mdx/test/mdx-syntax-highlighting.test.js
index 32c6bcd04..d420faabc 100644
--- a/packages/integrations/mdx/test/mdx-syntax-highlighting.test.js
+++ b/packages/integrations/mdx/test/mdx-syntax-highlighting.test.js
@@ -67,6 +67,32 @@ describe('MDX syntax highlighting', () => {
const prismCodeBlock = document.querySelector('pre.language-astro');
expect(prismCodeBlock).to.not.be.null;
});
+
+ for (const extendMarkdownConfig of [true, false]) {
+ it(`respects syntaxHighlight when extendMarkdownConfig = ${extendMarkdownConfig}`, async () => {
+ const fixture = await loadFixture({
+ root: FIXTURE_ROOT,
+ markdown: {
+ syntaxHighlight: 'shiki',
+ },
+ integrations: [
+ mdx({
+ extendMarkdownConfig,
+ syntaxHighlight: 'prism',
+ }),
+ ],
+ });
+ await fixture.build();
+
+ const html = await fixture.readFile('/index.html');
+ const { document } = parseHTML(html);
+
+ const shikiCodeBlock = document.querySelector('pre.astro-code');
+ expect(shikiCodeBlock, 'Markdown config syntaxHighlight used unexpectedly').to.be.null;
+ const prismCodeBlock = document.querySelector('pre.language-astro');
+ expect(prismCodeBlock).to.not.be.null;
+ });
+ }
});
it('supports custom highlighter - shiki-twoslash', async () => {
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-07 22:21:41 +0000