@astrojs/mdx 0.11.5 → 0.12.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 2b17bb94a2cdc3f6
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.11.5 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 dac9ca86e0959274
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.12.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,21 @@
 # @astrojs/mdx
 
+## 0.12.0
+
+### Minor Changes
+
+- [#5427](https://github.com/withastro/astro/pull/5427) [`2a1c085b1`](https://github.com/withastro/astro/commit/2a1c085b199f24e34424ec8c19041c03602c53c5) Thanks [@backflip](https://github.com/backflip)! - Uses remark-rehype options from astro.config.mjs
+
+### Patch Changes
+
+- [#5448](https://github.com/withastro/astro/pull/5448) [`ef2ffc7ae`](https://github.com/withastro/astro/commit/ef2ffc7ae9ff554860238ecd2fb3bf6d82b5801b) Thanks [@delucis](https://github.com/delucis)! - Fix broken link in README
+
+## 0.11.6
+
+### Patch Changes
+
+- [#5335](https://github.com/withastro/astro/pull/5335) [`dca762cf7`](https://github.com/withastro/astro/commit/dca762cf734a657d8f126fd6958892b6163a4f67) Thanks [@bluwy](https://github.com/bluwy)! - Preserve code element node `data.meta` in `properties.metastring` for rehype syntax highlighters, like `rehype-pretty-code``
+
 ## 0.11.5
 
 ### Patch Changes

package/README.md

@@ -191,11 +191,10 @@ export default {
 };
 ```
 
-…every MDX file will have `customProperty` in its frontmatter! See [our Markdown documentation](https://docs.astro.build/en/guides/markdown-content/#injecting-frontmatter) for more usage instructions and a [reading time plugin example](https://docs.astro.build/en/guides/markdown-content/#example-calculate-reading-time).
+…every MDX file will have `customProperty` in its frontmatter! See [our Markdown documentation](https://docs.astro.build/en/guides/markdown-content/#example-injecting-frontmatter) for more usage instructions and a [reading time plugin example](https://docs.astro.build/en/guides/markdown-content/#example-calculate-reading-time).
 
 ### Layouts
-
-Layouts can be applied [in the same way as standard Astro Markdown](https://docs.astro.build/en/guides/markdown-content/#markdown-layouts). You can add a `layout` to [your frontmatter](#frontmatter) like so:
+Layouts can be applied [in the same way as standard Astro Markdown](https://docs.astro.build/en/guides/markdown-content/#frontmatter-layout). You can add a `layout` to [your frontmatter](#frontmatter) like so:
 
 ```yaml
 ---
@@ -519,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.

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { PluggableList } from '@mdx-js/mdx/lib/core.js';
 import type { AstroIntegration } from 'astro';
+import type { Options as RemarkRehypeOptions } from 'remark-rehype';
 export declare type MdxOptions = {
     remarkPlugins?: PluggableList;
     rehypePlugins?: PluggableList;
@@ -12,5 +13,6 @@ export declare type MdxOptions = {
      * - false - do not inherit any plugins
      */
     extendPlugins?: 'markdown' | 'astroDefaults' | false;
+    remarkRehype?: RemarkRehypeOptions;
 };
 export default function mdx(mdxOptions?: MdxOptions): AstroIntegration;

package/dist/index.js

@@ -34,6 +34,13 @@ function mdx(mdxOptions = {}) {
           );
           console.info(`See "extendPlugins" option to configure this behavior.`);
         }
+        let remarkRehypeOptions = mdxOptions.remarkRehype;
+        if (mdxOptions.extendPlugins === "markdown") {
+          remarkRehypeOptions = {
+            ...config.markdown.remarkRehype,
+            ...remarkRehypeOptions
+          };
+        }
         const mdxPluginOpts = {
           remarkPlugins: await getRemarkPlugins(mdxOptions, config),
           rehypePlugins: getRehypePlugins(mdxOptions, config),
@@ -41,7 +48,8 @@ function mdx(mdxOptions = {}) {
           jsx: true,
           jsxImportSource: "astro",
           format: "mdx",
-          mdExtensions: []
+          mdExtensions: [],
+          remarkRehypeOptions
         };
         let importMetaEnv = {
           SITE: config.site

package/dist/plugins.js

@@ -5,6 +5,7 @@ import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import remarkSmartypants from "remark-smartypants";
 import rehypeCollectHeadings from "./rehype-collect-headings.js";
+import rehypeMetaString from "./rehype-meta-string.js";
 import remarkPrism from "./remark-prism.js";
 import remarkShiki from "./remark-shiki.js";
 import { jsToTreeNode } from "./utils.js";
@@ -119,6 +120,7 @@ async function getRemarkPlugins(mdxOptions, config) {
 function getRehypePlugins(mdxOptions, config) {
   let rehypePlugins = [
     rehypeCollectHeadings,
+    rehypeMetaString,
     [rehypeRaw, { passThrough: nodeTypes }]
   ];
   switch (mdxOptions.extendPlugins) {

package/dist/rehype-meta-string.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Moves `data.meta` to `properties.metastring` for the `code` element node
+ * as `rehype-raw` strips `data` from all nodes, which may contain useful information.
+ * e.g. ```js {1:3} => metastring: "{1:3}"
+ */
+export default function rehypeMetaString(): (tree: any) => void;

package/dist/rehype-meta-string.js

@@ -0,0 +1,15 @@
+import { visit } from "unist-util-visit";
+function rehypeMetaString() {
+  return function(tree) {
+    visit(tree, (node) => {
+      var _a;
+      if (node.type === "element" && node.tagName === "code" && ((_a = node.data) == null ? void 0 : _a.meta)) {
+        node.properties ?? (node.properties = {});
+        node.properties.metastring = node.data.meta;
+      }
+    });
+  };
+}
+export {
+  rehypeMetaString as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.11.5",
+  "version": "0.12.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -23,7 +23,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@astrojs/prism": "^1.0.1",
+    "@astrojs/prism": "^1.0.2",
     "@mdx-js/mdx": "^2.1.2",
     "@mdx-js/rollup": "^2.1.1",
     "acorn": "^8.8.0",
@@ -46,8 +46,8 @@
     "@types/github-slugger": "^1.3.0",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.5.3",
-    "astro-scripts": "0.0.8",
+    "astro": "1.6.11",
+    "astro-scripts": "0.0.9",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
     "linkedom": "^0.14.12",
@@ -55,6 +55,8 @@
     "mdast-util-to-string": "^3.1.0",
     "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"

package/src/index.ts

@@ -5,6 +5,7 @@ import type { AstroIntegration } from 'astro';
 import { parse as parseESM } from 'es-module-lexer';
 import { blue, bold } from 'kleur/colors';
 import fs from 'node:fs/promises';
+import type { Options as RemarkRehypeOptions } from 'remark-rehype';
 import { VFile } from 'vfile';
 import type { Plugin as VitePlugin } from 'vite';
 import {
@@ -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 {
@@ -62,15 +64,25 @@ 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),
 					recmaPlugins: mdxOptions.recmaPlugins,
 					jsx: true,
 					jsxImportSource: 'astro',
-					// Note: disable `.md` support
+					// Note: disable `.md` (and other alternative extensions for markdown files like `.markdown`) support
 					format: 'mdx',
 					mdExtensions: [],
+					remarkRehypeOptions,
 				};
 
 				let importMetaEnv: Record<string, any> = {

package/src/plugins.ts

@@ -11,6 +11,7 @@ import remarkSmartypants from 'remark-smartypants';
 import type { Data, VFile } from 'vfile';
 import { MdxOptions } from './index.js';
 import rehypeCollectHeadings from './rehype-collect-headings.js';
+import rehypeMetaString from './rehype-meta-string.js';
 import remarkPrism from './remark-prism.js';
 import remarkShiki from './remark-shiki.js';
 import { jsToTreeNode } from './utils.js';
@@ -150,6 +151,8 @@ export function getRehypePlugins(
 	let rehypePlugins: PluggableList = [
 		// getHeadings() is guaranteed by TS, so we can't allow user to override
 		rehypeCollectHeadings,
+		// 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,
 	];

package/src/rehype-meta-string.ts

@@ -0,0 +1,17 @@
+import { visit } from 'unist-util-visit';
+
+/**
+ * Moves `data.meta` to `properties.metastring` for the `code` element node
+ * as `rehype-raw` strips `data` from all nodes, which may contain useful information.
+ * e.g. ```js {1:3} => metastring: "{1:3}"
+ */
+export default function rehypeMetaString() {
+	return function (tree: any) {
+		visit(tree, (node) => {
+			if (node.type === 'element' && node.tagName === 'code' && node.data?.meta) {
+				node.properties ??= {};
+				node.properties.metastring = node.data.meta;
+			}
+		});
+	};
+}

package/test/fixtures/mdx-astro-markdown-remarkRehype/src/pages/index.mdx

@@ -0,0 +1,5 @@
+# Hello world
+
+This[^1] should be visible.
+
+[^1]: And there would be a footnote.

package/test/fixtures/mdx-syntax-hightlighting/src/pages/index.mdx

@@ -1,6 +1,6 @@
 # Syntax highlighting
 
-```astro
+```astro {2}
 ---
 const handlesAstroSyntax = true
 ---

package/test/mdx-astro-markdown-remarkRehype.test.js

@@ -0,0 +1,85 @@
+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'
+		);
+	});
+});

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

@@ -4,6 +4,7 @@ import { expect } from 'chai';
 import { parseHTML } from 'linkedom';
 import { loadFixture } from '../../../astro/test/test-utils.js';
 import shikiTwoslash from 'remark-shiki-twoslash';
+import rehypePrettyCode from 'rehype-pretty-code';
 
 const FIXTURE_ROOT = new URL('./fixtures/mdx-syntax-hightlighting/', import.meta.url);
 
@@ -88,4 +89,31 @@ describe('MDX syntax highlighting', () => {
 		const twoslashCodeBlock = document.querySelector('pre.shiki');
 		expect(twoslashCodeBlock).to.not.be.null;
 	});
+
+	it('supports custom highlighter - rehype-pretty-code', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			markdown: {
+				syntaxHighlight: false,
+			},
+			integrations: [
+				mdx({
+					rehypePlugins: [
+						[
+							rehypePrettyCode,
+							{
+								onVisitHighlightedLine(node) {
+									node.properties.style = 'background-color:#000000';
+								},
+							},
+						],
+					],
+				}),
+			],
+		});
+		await fixture.build();
+
+		const html = await fixture.readFile('/index.html');
+		expect(html).to.include('style="background-color:#000000"');
+	});
 });