Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MDX] Support remark-rehype options from Astro Markdown config #5427

Merged
merged 6 commits into from
Nov 22, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions .changeset/nice-jokes-smile.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/mdx': minor
---

Uses remark-rehype options from astro.config.mjs
20 changes: 20 additions & 0 deletions packages/integrations/mdx/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -518,6 +518,26 @@ These are plugins that modify the output [estree](https://github.com/estree/estr

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.

### remarkRehype

Markdown content is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options).

You can use remark-rehype options in your MDX integration config file like so:

```js
// astro.config.mjs
export default {
integrations: [mdx({
remarkRehype: {
footnoteLabel: 'Catatan kaki',
footnoteBackLabel: 'Kembali ke konten',
},
})],
};
```

This inherits the configuration of `markdown.remarkRehype`. This behavior can be changed by configuring `extendPlugins`.

## Examples

- The [Astro MDX example](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.
Expand Down
1 change: 1 addition & 0 deletions packages/integrations/mdx/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
"mocha": "^9.2.2",
"reading-time": "^1.5.0",
"rehype-pretty-code": "^0.4.0",
"remark-rehype": "^10.1.0",
"remark-shiki-twoslash": "^3.1.0",
"remark-toc": "^8.0.1",
"vite": "^3.0.0"
Expand Down
12 changes: 12 additions & 0 deletions packages/integrations/mdx/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { Options as RemarkRehypeOptions } from 'remark-rehype';
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';
Expand Down Expand Up @@ -33,6 +34,7 @@ export type MdxOptions = {
* - false - do not inherit any plugins
*/
extendPlugins?: 'markdown' | 'astroDefaults' | false;
remarkRehype?: RemarkRehypeOptions;
};

export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
Expand Down Expand Up @@ -62,6 +64,15 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
console.info(`See "extendPlugins" option to configure this behavior.`);
}

let remarkRehypeOptions = mdxOptions.remarkRehype;

if (mdxOptions.extendPlugins === 'markdown') {
remarkRehypeOptions = {
...config.markdown.remarkRehype,
...remarkRehypeOptions,
};
}

const mdxPluginOpts: MdxRollupPluginOptions = {
remarkPlugins: await getRemarkPlugins(mdxOptions, config),
rehypePlugins: getRehypePlugins(mdxOptions, config),
Expand All @@ -71,6 +82,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
// Note: disable `.md` (and other alternative extensions for markdown files like `.markdown`) support
format: 'mdx',
mdExtensions: [],
remarkRehypeOptions,
};

let importMetaEnv: Record<string, any> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Hello world

This[^1] should be visible.

[^1]: And there would be a footnote.
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import mdx from '@astrojs/mdx';

import { expect } from 'chai';
import { parseHTML } from 'linkedom';
import { loadFixture } from '../../../astro/test/test-utils.js';

describe('MDX with Astro Markdown remark-rehype config', () => {
it('Renders footnotes with values from the default configuration', async () => {
const fixture = await loadFixture({
root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url),
integrations: [mdx()],
markdown: {
remarkRehype: {
footnoteLabel: 'Catatan kaki',
footnoteBackLabel: 'Kembali ke konten',
},
},
});

await fixture.build();
const html = await fixture.readFile('/index.html');
const { document } = parseHTML(html);

expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki');
expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal(
'Kembali ke konten'
);
});

it('Renders footnotes with values from custom configuration extending the default', async () => {
const fixture = await loadFixture({
root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url),
integrations: [mdx({
remarkRehype: {
footnoteLabel: 'Catatan kaki',
footnoteBackLabel: 'Kembali ke konten',
},
})],
markdown: {
remarkRehype: {
footnoteBackLabel: 'Replace me',
},
},
});

await fixture.build();
const html = await fixture.readFile('/index.html');
const { document } = parseHTML(html);

expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki');
expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal(
'Kembali ke konten'
);
});

it('Renders footnotes with values from custom configuration without extending the default', async () => {
const fixture = await loadFixture({
root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url),
integrations: [mdx({
extendPlugins: 'astroDefaults',
remarkRehype: {
footnoteLabel: 'Catatan kaki',
},
})],
markdown: {
remarkRehype: {
footnoteBackLabel: 'Kembali ke konten',
},
},
});

await fixture.build();
const html = await fixture.readFile('/index.html');
const { document } = parseHTML(html);

expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki');
expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal(
'Back to content'
);
});
});
9 changes: 2 additions & 7 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.