@astrojs/mdx 0.11.5 → 0.11.6

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 2b17bb94a2cdc3f6
+@astrojs/mdx:build: cache hit, replaying output 788a04a94f8adf80
 @astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.11.5 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > @astrojs/mdx@0.11.6 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,11 @@
 # @astrojs/mdx
 
+## 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

@@ -194,8 +194,7 @@ 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).
 
 ### 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
 ---

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.11.6",
   "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.6",
+    "astro-scripts": "0.0.9",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
     "linkedom": "^0.14.12",
@@ -55,6 +55,7 @@
     "mdast-util-to-string": "^3.1.0",
     "mocha": "^9.2.2",
     "reading-time": "^1.5.0",
+    "rehype-pretty-code": "^0.4.0",
     "remark-shiki-twoslash": "^3.1.0",
     "remark-toc": "^8.0.1",
     "vite": "^3.0.0"

package/src/index.ts

@@ -68,7 +68,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 					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: [],
 				};

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-syntax-hightlighting/src/pages/index.mdx

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

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"');
+	});
 });