Preserve code element node meta for rehype syntax highlighters (#5335)

1 files changed, 28 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/mdx-syntax-highlighting.test.js b/packages/integrations/mdx/test/mdx-syntax-highlighting.test.js
index 70da75357..6203ed82c 100644
--- a/packages/integrations/mdx/test/mdx-syntax-highlighting.test.js
+++ b/packages/integrations/mdx/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"')
+	});
 });