Skip to content

Commit 97efa77

Browse files
ArmandPhilippotmatthewpPrincesseuhastrobot-houstondelucis
authored
6.4 Minor release (#13945)
Co-authored-by: Matthew Phillips <matthewphillips@cloudflare.com> Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com> Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: delucis <357379+delucis@users.noreply.github.com>
1 parent b21ba26 commit 97efa77

8 files changed

Lines changed: 243 additions & 71 deletions

File tree

src/content/docs/en/guides/integrations-guide/mdx.mdx

Lines changed: 45 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -255,16 +255,18 @@ Once the MDX integration is installed, no configuration is necessary to use `.md
255255
You can configure how your MDX is rendered with the following options:
256256

257257
* [Options inherited from Markdown config](#options-inherited-from-markdown-config)
258+
* [`processor`](#processor)
258259
* [`extendMarkdownConfig`](#extendmarkdownconfig)
259260
* [`recmaPlugins`](#recmaplugins)
260261
* [`optimize`](#optimize)
261262

262263
### Options inherited from Markdown config
263264

264-
All [`markdown` configuration options](/en/reference/configuration-reference/#markdown-options) 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).
265+
All [`markdown` configuration options](/en/reference/configuration-reference/#markdown-options) can be configured separately in the MDX integration, including the [Markdown processor](#processor), syntax highlighting, and more. Options will default to those in your Markdown config ([see the `extendMarkdownConfig` option](#extendmarkdownconfig) to modify this).
265266

266267
```js title="astro.config.mjs"
267268
import { defineConfig } from 'astro/config';
269+
import { unified } from '@astrojs/markdown-remark';
268270
import mdx from '@astrojs/mdx';
269271
import remarkToc from 'remark-toc';
270272
import rehypePresetMinify from 'rehype-preset-minify';
@@ -275,21 +277,44 @@ export default defineConfig({
275277
mdx({
276278
syntaxHighlight: 'shiki',
277279
shikiConfig: { theme: 'dracula' },
278-
remarkPlugins: [remarkToc],
279-
rehypePlugins: [rehypePresetMinify],
280-
remarkRehype: { footnoteLabel: 'Footnotes' },
281-
gfm: false,
280+
processor: unified({
281+
remarkPlugins: [remarkToc],
282+
rehypePlugins: [rehypePresetMinify],
283+
remarkRehype: { footnoteLabel: 'Footnotes' },
284+
gfm: false
285+
}),
282286
}),
283287
],
284288
});
285289
```
286290

287-
:::caution
288-
MDX does not support passing remark and rehype plugins as a string. You should install, import, and apply the plugin function instead.
289-
:::
290-
291291
<ReadMore>See the [Markdown Options reference](/en/reference/configuration-reference/#markdown-options) for a complete list of options.</ReadMore>
292292

293+
### `processor`
294+
295+
<p>
296+
297+
**Type:** `MarkdownProcessor`<br />
298+
**Default:** inherited from [`markdown.processor`](/en/reference/configuration-reference/#markdownprocessor)<br />
299+
<Since v="6.0.0" pkg="@astrojs/mdx" />
300+
</p>
301+
302+
By default, `.mdx` files render through the same [Markdown processor](/en/guides/markdown-content/#choosing-a-markdown-processor) as your `.md` files. Set `processor` to use a different processor, or the same processor with different options, for `.mdx` files only.
303+
304+
For example, to keep the default remark/rehype processor for `.md` files while rendering `.mdx` files with [Sätteri](https://satteri.bruits.org/) using `@astrojs/markdown-satteri`:
305+
306+
```js title="astro.config.mjs"
307+
import { defineConfig } from 'astro/config';
308+
import { satteri } from '@astrojs/markdown-satteri';
309+
import mdx from '@astrojs/mdx';
310+
311+
export default defineConfig({
312+
integrations: [
313+
mdx({ processor: satteri() }),
314+
],
315+
});
316+
```
317+
293318
### `extendMarkdownConfig`
294319

295320
<p>
@@ -301,28 +326,27 @@ MDX does not support passing remark and rehype plugins as a string. You should i
301326

302327
MDX will extend [your project's existing Markdown configuration](/en/reference/configuration-reference/#markdown-options) by default. To override individual options, you can specify their equivalent in your MDX configuration.
303328

304-
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:
329+
For example, say you need a different syntax highlighter and a different set of plugins for `.mdx` files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
305330

306331
```js title="astro.config.mjs"
307332
import { defineConfig } from 'astro/config';
333+
import { unified } from '@astrojs/markdown-remark';
308334
import mdx from '@astrojs/mdx';
309335

310336
export default defineConfig({
311337
// ...
312338
markdown: {
313339
syntaxHighlight: 'prism',
314-
remarkPlugins: [remarkPlugin1],
315-
gfm: true,
340+
processor: unified({ remarkPlugins: [remarkPlugin1] }),
316341
},
317342
integrations: [
318343
mdx({
319-
// `syntaxHighlight` inherited from Markdown
344+
// Markdown `syntaxHighlight` overridden,
345+
// `.mdx` files use Shiki instead.
346+
syntaxHighlight: 'shiki',
320347

321-
// Markdown `remarkPlugins` ignored,
322-
// only `remarkPlugin2` applied.
323-
remarkPlugins: [remarkPlugin2],
324-
// `gfm` overridden to `false`
325-
gfm: false,
348+
// `markdown.processor` gets overridden for `.mdx` files by this option
349+
processor: unified({ remarkPlugins: [remarkPlugin2] }),
326350
}),
327351
],
328352
});
@@ -332,18 +356,19 @@ You may also need to disable `markdown` config extension in MDX. For this, set `
332356

333357
```js title="astro.config.mjs"
334358
import { defineConfig } from 'astro/config';
359+
import { unified } from '@astrojs/markdown-remark';
335360
import mdx from '@astrojs/mdx';
336361

337362
export default defineConfig({
338363
// ...
339364
markdown: {
340-
remarkPlugins: [remarkPlugin1],
365+
processor: unified({ remarkPlugins: [remarkPlugin] }),
341366
},
342367
integrations: [
343368
mdx({
344369
// Markdown config now ignored
345370
extendMarkdownConfig: false,
346-
// No `remarkPlugins` applied
371+
// Default `unified()` processor used
347372
}),
348373
],
349374
});

0 commit comments

Comments
 (0)