Lazy loaded shiki languages during syntax highlighting (#10618)

3 files changed, 7 insertions, 7 deletions

diff --git a/packages/integrations/markdoc/components/Renderer.astro b/packages/integrations/markdoc/components/Renderer.astro
index 4b0dbb3a0..c26d92ad7 100644
--- a/packages/integrations/markdoc/components/Renderer.astro
+++ b/packages/integrations/markdoc/components/Renderer.astro
@@ -12,7 +12,7 @@ type Props = {
 const { stringifiedAst, config } = Astro.props as Props;
 
 const ast = Markdoc.Ast.fromJSON(stringifiedAst);
-const content = Markdoc.transform(ast, config);
+const content = await Markdoc.transform(ast, config);
 ---
 
 {
diff --git a/packages/integrations/markdoc/src/extensions/shiki.ts b/packages/integrations/markdoc/src/extensions/shiki.ts
index a39eb69a9..04fc8e867 100644
--- a/packages/integrations/markdoc/src/extensions/shiki.ts
+++ b/packages/integrations/markdoc/src/extensions/shiki.ts
@@ -11,12 +11,12 @@ export default async function shiki(config?: ShikiConfig): Promise<AstroMarkdocC
 		nodes: {
 			fence: {
 				attributes: Markdoc.nodes.fence.attributes!,
-				transform({ attributes }) {
+				async transform({ attributes }) {
 					// NOTE: The `meta` from fence code, e.g. ```js {1,3-4}, isn't quite supported by Markdoc.
 					// Only the `js` part is parsed as `attributes.language` and the rest is ignored. This means
 					// some Shiki transformers may not work correctly as it relies on the `meta`.
 					const lang = typeof attributes.language === 'string' ? attributes.language : 'plaintext';
-					const html = highlighter.highlight(attributes.content, lang);
+					const html = await highlighter.highlight(attributes.content, lang);
 
 					// Use `unescapeHTML` to return `HTMLString` for Astro renderer to inline as HTML
 					return unescapeHTML(html) as any;
diff --git a/packages/integrations/markdoc/test/syntax-highlighting.test.js b/packages/integrations/markdoc/test/syntax-highlighting.test.js
index bab309c87..7b2016808 100644
--- a/packages/integrations/markdoc/test/syntax-highlighting.test.js
+++ b/packages/integrations/markdoc/test/syntax-highlighting.test.js
@@ -23,7 +23,7 @@ describe('Markdoc - syntax highlighting', () => {
 	describe('shiki', () => {
 		it('transforms with defaults', async () => {
 			const ast = Markdoc.parse(entry);
-			const content = Markdoc.transform(ast, await getConfigExtendingShiki());
+			const content = await Markdoc.transform(ast, await getConfigExtendingShiki());
 
 			assert.equal(content.children.length, 2);
 			for (const codeBlock of content.children) {
@@ -36,7 +36,7 @@ describe('Markdoc - syntax highlighting', () => {
 		});
 		it('transforms with `theme` property', async () => {
 			const ast = Markdoc.parse(entry);
-			const content = Markdoc.transform(
+			const content = await Markdoc.transform(
 				ast,
 				await getConfigExtendingShiki({
 					theme: 'dracula',
@@ -53,7 +53,7 @@ describe('Markdoc - syntax highlighting', () => {
 		});
 		it('transforms with `wrap` property', async () => {
 			const ast = Markdoc.parse(entry);
-			const content = Markdoc.transform(
+			const content = await Markdoc.transform(
 				ast,
 				await getConfigExtendingShiki({
 					wrap: true,
@@ -76,7 +76,7 @@ describe('Markdoc - syntax highlighting', () => {
 			const config = await setupConfig({
 				extends: [prism()],
 			});
-			const content = Markdoc.transform(ast, config);
+			const content = await Markdoc.transform(ast, config);
 
 			assert.equal(content.children.length, 2);
 			const [tsBlock, cssBlock] = content.children;