Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions astro.sidebar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,9 @@ export const sidebar = [
'reference/modules/astro-zod',
],
}),
group('reference.processors', {
items: ['reference/markdown-processors/satteri', 'reference/markdown-processors/unified'],
}),
group('reference.other', {
items: [
'reference/integrations-reference',
Expand Down
2 changes: 2 additions & 0 deletions src/content.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,8 @@ export const collections = {
'@astrojs/alpinejs',
'@astrojs/cloudflare',
'@astrojs/markdoc',
'@astrojs/markdown-remark',
'@astrojs/markdown-satteri',
'@astrojs/mdx',
'@astrojs/netlify',
'@astrojs/node',
Expand Down
20 changes: 6 additions & 14 deletions src/content/docs/en/guides/integrations-guide/mdx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -301,14 +301,14 @@ export default defineConfig({

<p>

**Type:** `MarkdownProcessor`<br />
**Type:** [`MarkdownProcessor`](/en/reference/markdown-processors/unified/#markdownprocessor)<br />
**Default:** inherited from [`markdown.processor`](/en/reference/configuration-reference/#markdownprocessor)<br />
<Since v="6.0.0" pkg="@astrojs/mdx" />
</p>

By default, `.mdx` files render through the same [Markdown processor](/en/guides/markdown-content/#markdown-processors) as your `.md` files. You can configure a different processor for MDX or use the same processor with different options.

For example, to keep the default [Sätteri](https://satteri.bruits.org/) processor for `.md` files while rendering `.mdx` files with remark and rehype using `@astrojs/markdown-remark`:
For example, to keep the default [Sätteri](https://satteri.bruits.org/) processor for `.md` files while rendering `.mdx` files with remark and rehype using [`@astrojs/markdown-remark`](/en/reference/markdown-processors/unified/):

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
Expand All @@ -326,9 +326,9 @@ export default defineConfig({

<p><Since v="8.0.0" pkg="@astrojs/mdx" /></p>

Recma plugins modify the output [estree](https://github.com/estree/estree) directly. This is useful for modifying or injecting JavaScript variables in your MDX files, and has no effect on `.md` files.
Recma plugins directly modify the output [ESTree](https://github.com/estree/estree) when using the [unified processor](/en/reference/markdown-processors/unified/#unified). This is useful for modifying or injecting JavaScript variables in your MDX files, and has no effect on `.md` files.

Recma plugins are only supported by the [Unified processor](/en/guides/markdown-content/#when-to-use-unified). Pass them to `unified()` from `@astrojs/markdown-remark` using the `recmaPlugins` option:
By default, MDX [extends your Markdown configuration](#extendmarkdownconfig). This means you can pass them directly to [`unified()` when setting up `markdown.processor`](/en/guides/markdown-content/#setting-up-a-markdown-processor). If you do not wish to extend the Markdown configuration, you can also configure them independently for MDX:

```js title="astro.config.mjs" {3-4,8}
import { defineConfig } from 'astro/config';
Expand All @@ -343,8 +343,6 @@ export default defineConfig({
});
```

You can also set these plugins on [`markdown.processor`](/en/reference/configuration-reference/#markdownprocessor) instead. Your `.mdx` files will still run them, because MDX [extends your Markdown configuration](#extendmarkdownconfig) by default.

We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.

### `extendMarkdownConfig`
Expand Down Expand Up @@ -412,9 +410,7 @@ export default defineConfig({
### `recmaPlugins`

:::caution[Deprecated]
This option is deprecated and will be removed in a future major version. Pass `recmaPlugins` to the configured [`processor`](#processor) instead.

Learn more about [using recma plugins](#using-recma-plugins).
This option is deprecated and will be removed in a future major version. Install the [`unified()` processor](/en/guides/markdown-content/#setting-up-a-markdown-processor) and pass your recma plugins to it instead.
:::

<p>
Expand All @@ -424,11 +420,7 @@ Learn more about [using recma plugins](#using-recma-plugins).
<Since v="0.11.5" pkg="@astrojs/mdx" />
</p>

These are plugins that modify the output [estree](https://github.com/estree/estree) directly. This is useful for modifying or injecting JavaScript variables in your MDX files.

Since Astro v7, the default Markdown processor does not support recma plugins. If your project depends on them, you can [use the `unified()` processor](/en/guides/markdown-content/#setting-up-a-markdown-processor).

We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.
See the reference for the [`recmaPlugins` option of `unified()`](/en/reference/markdown-processors/unified/#optionsrecmaplugins) for more information. You can also [use them directly in your MDX configuration](#using-recma-plugins).

### `optimize`

Expand Down
16 changes: 10 additions & 6 deletions src/content/docs/en/guides/markdown-content.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -229,12 +229,16 @@ Sätteri is the default Markdown processor since Astro v7. Use it when:
- You want to benefit from a fast Rust-based Markdown and MDX compiler.
- Your project does not require any plugins, or you are comfortable writing your own plugins.

<ReadMore>See the [`satteri()` reference](/en/reference/markdown-processors/satteri/#satteri) for a full list of options and features.</ReadMore>

#### When to use Unified

Unified is the processor used by older versions of Astro. Use it when:
- You want to take advantage of its large ecosystem of [remark](https://remark.js.org/) or [rehype](https://github.com/rehypejs/rehype) plugins, or you need [recma plugins in your MDX files](/en/guides/integrations-guide/mdx/#using-recma-plugins).
- You are not ready to port your existing Unified plugins to Sätteri.

<ReadMore>See the [`unified()` reference](/en/reference/markdown-processors/unified/#unified) for a full list of options.</ReadMore>

### Setting up a Markdown processor

Astro provides [Markdown configuration options](/en/reference/configuration-reference/#markdown-options) that allow you to control [syntax highlighting](/en/guides/syntax-highlighting/) and the Markdown processor. Additionally, each Markdown processor offers [configurable features](#built-in-features) and allows you to [add plugins](#markdown-processor-plugins) to customize the Markdown rendering.
Expand All @@ -245,7 +249,7 @@ Astro provides [Markdown configuration options](/en/reference/configuration-refe

<Steps>

1. Install the [`@astrojs/markdown-satteri`](https://www.npmjs.com/package/@astrojs/markdown-satteri) package:
1. Install the [`@astrojs/markdown-satteri`](/en/reference/markdown-processors/satteri/) package:
<PackageManagerTabs>
<Fragment slot="npm">
```shell
Expand All @@ -264,7 +268,7 @@ Astro provides [Markdown configuration options](/en/reference/configuration-refe
</Fragment>
</PackageManagerTabs>

2. Import `satteri` from `@astrojs/markdown-satteri` and pass it to the [`markdown.processor`](/en/reference/configuration-reference/#markdownprocessor) option in your Astro config:
2. Import [`satteri()` from `@astrojs/markdown-satteri`](/en/reference/markdown-processors/satteri/#satteri) and pass it to the [`markdown.processor`](/en/reference/configuration-reference/#markdownprocessor) option in your Astro config:
```js title="astro.config.mjs"
import { defineConfig } from "astro/config";
import { satteri } from "@astrojs/markdown-satteri";
Expand All @@ -283,7 +287,7 @@ Astro provides [Markdown configuration options](/en/reference/configuration-refe

<Steps>

1. Install the [`@astrojs/markdown-remark`](https://www.npmjs.com/package/@astrojs/markdown-remark) package:
1. Install the [`@astrojs/markdown-remark`](/en/reference/markdown-processors/unified/) package:
<PackageManagerTabs>
<Fragment slot="npm">
```shell
Expand All @@ -302,7 +306,7 @@ Astro provides [Markdown configuration options](/en/reference/configuration-refe
</Fragment>
</PackageManagerTabs>

2. Import `unified` from `@astrojs/markdown-remark` and pass it to the [`markdown.processor`](/en/reference/configuration-reference/#markdownprocessor) option in your Astro config:
2. Import [`unified()` from `@astrojs/markdown-remark`](/en/reference/markdown-processors/unified/#unified) and pass it to the [`markdown.processor`](/en/reference/configuration-reference/#markdownprocessor) option in your Astro config:
```js title="astro.config.mjs"
import { defineConfig } from "astro/config";
import { unified } from "@astrojs/markdown-remark";
Expand Down Expand Up @@ -502,7 +506,7 @@ Two types of plugins are supported:

<MarkdownProcessorTabs>
<Fragment slot="satteri">
When [mdast](https://satteri.bruits.org/docs/plugins/#mdast-plugins) or [hast](https://satteri.bruits.org/docs/plugins/#hast-plugins) plugins accept options to configure their behavior, you can pass them as an options object to the plugin function.
When [mdast](/en/reference/markdown-processors/satteri/#optionsmdastplugins) or [hast](/en/reference/markdown-processors/satteri/#optionshastplugins) plugins accept options to configure their behavior, you can pass them as an options object to the plugin function.

The following example applies [`satteri-imgattr`](https://www.npmjs.com/package/satteri-imgattr) and [`satteri-callouts`](https://www.npmjs.com/package/satteri-callouts) to Markdown files:

Expand All @@ -527,7 +531,7 @@ Two types of plugins are supported:
```
</Fragment>
<Fragment slot="unified">
When [remark](https://github.com/remarkjs/remark) or [rehype](https://github.com/rehypejs/rehype) plugins accept options to configure their behavior, you can pass them in a nested array. The first element is the plugin, and the second element is an options object.
When [remark](/en/reference/markdown-processors/unified/#optionsremarkplugins) or [rehype](/en/reference/markdown-processors/unified/#optionsrehypeplugins) plugins accept options to configure their behavior, you can pass them in a nested array. The first element is the plugin, and the second element is an options object.

The following example applies [`remark-imgattr`](https://www.npmjs.com/package/remark-imgattr) and [`rehype-github-alerts`](https://www.npmjs.com/package/rehype-github-alerts) to Markdown files:

Expand Down
Loading
Loading