Markdoc - improve syntax highlighting support (#7209)

* feat: prism and shiki support, with better exports!

* chore: update tests

* chore: fix lock

* chore: add prism test

* chore: remove `async` from prism

* docs: update syntax highlight readme

* chore: changeset

* edit: remove `await` from prism docs

* chore: update old changest with new shiki instructions

* fix: add trailing newline on ts-expect-error

* refactor: resolve promises internally

* docs: remove `await` from shiki examples

1 files changed, 69 insertions, 44 deletions

diff --git a/packages/integrations/markdoc/test/syntax-highlighting.test.js b/packages/integrations/markdoc/test/syntax-highlighting.test.js
index ef1845eb9..1530e0c82 100644
--- a/packages/integrations/markdoc/test/syntax-highlighting.test.js
+++ b/packages/integrations/markdoc/test/syntax-highlighting.test.js
@@ -1,7 +1,8 @@
 import { parseHTML } from 'linkedom';
 import { expect } from 'chai';
 import Markdoc from '@markdoc/markdoc';
-import { shiki } from '../dist/config.js';
+import shiki from '../dist/extensions/shiki.js';
+import prism from '../dist/extensions/prism.js';
 import { setupConfig } from '../dist/runtime.js';
 import { isHTMLString } from 'astro/runtime/server/index.js';
 
@@ -18,52 +19,76 @@ const highlighting = true;
 `;
 
 describe('Markdoc - syntax highlighting', () => {
-	it('transforms with defaults', async () => {
-		const ast = Markdoc.parse(entry);
-		const content = Markdoc.transform(ast, await getConfigExtendingShiki());
+	describe('shiki', () => {
+		it('transforms with defaults', async () => {
+			const ast = Markdoc.parse(entry);
+			const content = Markdoc.transform(ast, await getConfigExtendingShiki());
 
-		expect(content.children).to.have.lengthOf(2);
-		for (const codeBlock of content.children) {
-			expect(isHTMLString(codeBlock)).to.be.true;
+			expect(content.children).to.have.lengthOf(2);
+			for (const codeBlock of content.children) {
+				expect(isHTMLString(codeBlock)).to.be.true;
 
-			const pre = parsePreTag(codeBlock);
-			expect(pre.classList).to.include('astro-code');
-			expect(pre.classList).to.include('github-dark');
-		}
-	});
-	it('transforms with `theme` property', async () => {
-		const ast = Markdoc.parse(entry);
-		const content = Markdoc.transform(
-			ast,
-			await getConfigExtendingShiki({
-				theme: 'dracula',
-			})
-		);
-		expect(content.children).to.have.lengthOf(2);
-		for (const codeBlock of content.children) {
-			expect(isHTMLString(codeBlock)).to.be.true;
+				const pre = parsePreTag(codeBlock);
+				expect(pre.classList).to.include('astro-code');
+				expect(pre.classList).to.include('github-dark');
+			}
+		});
+		it('transforms with `theme` property', async () => {
+			const ast = Markdoc.parse(entry);
+			const content = Markdoc.transform(
+				ast,
+				await getConfigExtendingShiki({
+					theme: 'dracula',
+				})
+			);
+			expect(content.children).to.have.lengthOf(2);
+			for (const codeBlock of content.children) {
+				expect(isHTMLString(codeBlock)).to.be.true;
+
+				const pre = parsePreTag(codeBlock);
+				expect(pre.classList).to.include('astro-code');
+				expect(pre.classList).to.include('dracula');
+			}
+		});
+		it('transforms with `wrap` property', async () => {
+			const ast = Markdoc.parse(entry);
+			const content = Markdoc.transform(
+				ast,
+				await getConfigExtendingShiki({
+					wrap: true,
+				})
+			);
+			expect(content.children).to.have.lengthOf(2);
+			for (const codeBlock of content.children) {
+				expect(isHTMLString(codeBlock)).to.be.true;
 
-			const pre = parsePreTag(codeBlock);
-			expect(pre.classList).to.include('astro-code');
-			expect(pre.classList).to.include('dracula');
-		}
+				const pre = parsePreTag(codeBlock);
+				expect(pre.getAttribute('style')).to.include('white-space: pre-wrap');
+				expect(pre.getAttribute('style')).to.include('word-wrap: break-word');
+			}
+		});
 	});
-	it('transforms with `wrap` property', async () => {
-		const ast = Markdoc.parse(entry);
-		const content = Markdoc.transform(
-			ast,
-			await getConfigExtendingShiki({
-				wrap: true,
-			})
-		);
-		expect(content.children).to.have.lengthOf(2);
-		for (const codeBlock of content.children) {
-			expect(isHTMLString(codeBlock)).to.be.true;
 
-			const pre = parsePreTag(codeBlock);
-			expect(pre.getAttribute('style')).to.include('white-space: pre-wrap');
-			expect(pre.getAttribute('style')).to.include('word-wrap: break-word');
-		}
+	describe('prism', () => {
+		it('transforms', async () => {
+			const ast = Markdoc.parse(entry);
+			const config = await setupConfig({
+				extends: [prism()],
+			});
+			const content = Markdoc.transform(ast, config);
+
+			expect(content.children).to.have.lengthOf(2);
+			const [tsBlock, cssBlock] = content.children;
+
+			expect(isHTMLString(tsBlock)).to.be.true;
+			expect(isHTMLString(cssBlock)).to.be.true;
+
+			const preTs = parsePreTag(tsBlock);
+			expect(preTs.classList).to.include('language-ts');
+
+			const preCss = parsePreTag(cssBlock);
+			expect(preCss.classList).to.include('language-css');
+		});
 	});
 });
 
@@ -72,8 +97,8 @@ describe('Markdoc - syntax highlighting', () => {
  * @returns {import('../src/config.js').AstroMarkdocConfig}
  */
 async function getConfigExtendingShiki(config) {
-	return setupConfig({
-		extends: [await shiki(config)],
+	return await setupConfig({
+		extends: [shiki(config)],
 	});
 }