Sync from a8e1c0a7402940e0fc5beef669522b315052df1blatest

139 files changed, 3130 insertions, 0 deletions

diff --git a/packages/integrations/markdoc/test/content-collections.test.js b/packages/integrations/markdoc/test/content-collections.test.js
new file mode 100644
index 000000000..48e97d45d
--- /dev/null
+++ b/packages/integrations/markdoc/test/content-collections.test.js
@@ -0,0 +1,120 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { parse as parseDevalue } from 'devalue';
+import { fixLineEndings, loadFixture } from '../../../astro/test/test-utils.js';
+import markdoc from '../dist/index.js';
+
+function formatPost(post) {
+	return {
+		...post,
+		body: fixLineEndings(post.body),
+	};
+}
+
+const root = new URL('./fixtures/content-collections/', import.meta.url);
+
+const sortById = (a, b) => a.id.localeCompare(b.id);
+
+describe('Markdoc - Content Collections', () => {
+	let baseFixture;
+
+	before(async () => {
+		baseFixture = await loadFixture({
+			root,
+			integrations: [markdoc()],
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await baseFixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('loads entry', async () => {
+			const res = await baseFixture.fetch('/entry.json');
+			const post = parseDevalue(await res.text());
+			assert.deepEqual(formatPost(post), post1Entry);
+		});
+
+		it('loads collection', async () => {
+			const res = await baseFixture.fetch('/collection.json');
+			const posts = parseDevalue(await res.text());
+			assert.notEqual(posts, null);
+
+			assert.deepEqual(
+				posts.sort(sortById).map((post) => formatPost(post)),
+				[post1Entry, post2Entry, post3Entry],
+			);
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await baseFixture.build();
+		});
+
+		it('loads entry', async () => {
+			const res = await baseFixture.readFile('/entry.json');
+			const post = parseDevalue(res);
+			assert.deepEqual(formatPost(post), post1Entry);
+		});
+
+		it('loads collection', async () => {
+			const res = await baseFixture.readFile('/collection.json');
+			const posts = parseDevalue(res);
+			assert.notEqual(posts, null);
+			assert.deepEqual(
+				posts.sort(sortById).map((post) => formatPost(post)),
+				[post1Entry, post2Entry, post3Entry],
+			);
+		});
+	});
+});
+
+const post1Entry = {
+	id: 'post-1.mdoc',
+	slug: 'post-1',
+	collection: 'blog',
+	data: {
+		schemaWorks: true,
+		title: 'Post 1',
+	},
+	body: '## Post 1\n\nThis is the contents of post 1.',
+	deferredRender: true,
+	filePath: 'src/content/blog/post-1.mdoc',
+	digest: '5d5bd98d949e2b9a',
+};
+
+const post2Entry = {
+	id: 'post-2.mdoc',
+	slug: 'post-2',
+	collection: 'blog',
+	data: {
+		schemaWorks: true,
+		title: 'Post 2',
+	},
+	body: '## Post 2\n\nThis is the contents of post 2.',
+	deferredRender: true,
+	filePath: 'src/content/blog/post-2.mdoc',
+	digest: '595af4b93a4af072',
+};
+
+const post3Entry = {
+	id: 'post-3.mdoc',
+	slug: 'post-3',
+	collection: 'blog',
+	data: {
+		schemaWorks: true,
+		title: 'Post 3',
+	},
+	body: '## Post 3\n\nThis is the contents of post 3.',
+	deferredRender: true,
+	filePath: 'src/content/blog/post-3.mdoc',
+	digest: 'ef589606e542247e',
+};
diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/content-collections/astro.config.mjs
new file mode 100644
index 000000000..1bd8ba93f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/content-collections/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/package.json b/packages/integrations/markdoc/test/fixtures/content-collections/package.json
new file mode 100644
index 000000000..370b87957
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/content-collections/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-content-collections",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-1.mdoc b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-1.mdoc
new file mode 100644
index 000000000..06c900963
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-1.mdoc
@@ -0,0 +1,7 @@
+---
+title: Post 1
+---
+
+## Post 1
+
+This is the contents of post 1.
diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-2.mdoc b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-2.mdoc
new file mode 100644
index 000000000..cf4dc162f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-2.mdoc
@@ -0,0 +1,7 @@
+---
+title: Post 2
+---
+
+## Post 2
+
+This is the contents of post 2.
diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-3.mdoc b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-3.mdoc
new file mode 100644
index 000000000..6c601eb65
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-3.mdoc
@@ -0,0 +1,7 @@
+---
+title: Post 3
+---
+
+## Post 3
+
+This is the contents of post 3.
diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/config.ts
new file mode 100644
index 000000000..3b411201a
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/config.ts
@@ -0,0 +1,12 @@
+import { defineCollection, z } from 'astro:content';
+
+const blog = defineCollection({
+	schema: z.object({
+		title: z.string(),
+	}).transform(data => ({
+		...data,
+		schemaWorks: true,
+	}))
+});
+
+export const collections = { blog };
diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/collection.json.js b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/collection.json.js
new file mode 100644
index 000000000..cb3c84652
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/collection.json.js
@@ -0,0 +1,8 @@
+import { getCollection } from 'astro:content';
+import { stringify } from 'devalue';
+import { stripAllRenderFn } from '../../utils.js';
+
+export async function GET() {
+	const posts = await getCollection('blog');
+	return new Response(stringify(stripAllRenderFn(posts)));
+}
diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/entry.json.js b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/entry.json.js
new file mode 100644
index 000000000..53dd17013
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/entry.json.js
@@ -0,0 +1,8 @@
+import { getEntryBySlug } from 'astro:content';
+import { stringify } from 'devalue';
+import { stripRenderFn } from '../../utils.js';
+
+export async function GET() {
+	const post = await getEntryBySlug('blog', 'post-1');
+	return new Response(stringify(stripRenderFn(post)));
+}
diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/utils.js b/packages/integrations/markdoc/test/fixtures/content-collections/utils.js
new file mode 100644
index 000000000..3a6244327
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/content-collections/utils.js
@@ -0,0 +1,8 @@
+export function stripRenderFn(entryWithRender) {
+	const { render, ...entry } = entryWithRender;
+	return entry;
+}
+
+export function stripAllRenderFn(collection = []) {
+	return collection.map(stripRenderFn);
+}
diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/headings-custom/astro.config.mjs
new file mode 100644
index 000000000..1bd8ba93f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings-custom/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/headings-custom/markdoc.config.mjs
new file mode 100644
index 000000000..cbd03d728
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings-custom/markdoc.config.mjs
@@ -0,0 +1,10 @@
+import { component, defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	nodes: {
+		heading: {
+			...nodes.heading,
+			render: component('./src/components/Heading.astro'),
+		}
+	}
+});
diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/package.json b/packages/integrations/markdoc/test/fixtures/headings-custom/package.json
new file mode 100644
index 000000000..67a974912
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings-custom/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/headings-custom",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/src/components/Heading.astro b/packages/integrations/markdoc/test/fixtures/headings-custom/src/components/Heading.astro
new file mode 100644
index 000000000..ec6fa8305
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings-custom/src/components/Heading.astro
@@ -0,0 +1,14 @@
+---
+type Props = {
+	level: number;
+	id: string;
+};
+
+const { level, id }: Props = Astro.props;
+
+const Tag = `h${level}`;
+---
+
+<Tag data-custom-heading {id}>
+	<slot />
+</Tag>
diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/config.ts
new file mode 100644
index 000000000..a142ace11
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const docs = defineCollection({});
+
+export const collections = {
+	docs,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings-stale-cache-check.mdoc b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings-stale-cache-check.mdoc
new file mode 100644
index 000000000..75cd52884
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings-stale-cache-check.mdoc
@@ -0,0 +1,13 @@
+Our heading ID generator can have a stale cache for duplicates. Let's check for those!
+
+# Level 1 heading
+
+## Level **2 heading**
+
+### Level _3 heading_
+
+#### Level [4 heading](/with-a-link)
+
+##### Level 5 heading with override {% #id-override %}
+
+###### Level 6 heading
diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings.mdoc b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings.mdoc
new file mode 100644
index 000000000..3eb66580a
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings.mdoc
@@ -0,0 +1,11 @@
+# Level 1 heading
+
+## Level **2 heading**
+
+### Level _3 heading_
+
+#### Level [4 heading](/with-a-link)
+
+##### Level 5 heading with override {% #id-override %}
+
+###### Level 6 heading
diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/src/pages/[slug].astro b/packages/integrations/markdoc/test/fixtures/headings-custom/src/pages/[slug].astro
new file mode 100644
index 000000000..90b021e95
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings-custom/src/pages/[slug].astro
@@ -0,0 +1,34 @@
+---
+import { CollectionEntry, getCollection } from "astro:content";
+
+export async function getStaticPaths() {
+	const docs = await getCollection('docs');
+	return docs.map(doc => ({ params: { slug: doc.slug }, props: doc }));
+}
+
+type Props = CollectionEntry<'docs'>;
+
+const { Content, headings } = await Astro.props.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<nav data-toc>
+		<ul>
+			{headings.map(heading => (
+				<li>
+					<a href={`#${heading.slug}`} data-depth={heading.depth}>{heading.text}</a>
+				</li>
+			))}
+		</ul>
+	</nav>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/headings/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/headings/astro.config.mjs
new file mode 100644
index 000000000..1bd8ba93f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/headings/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/headings/markdoc.config.mjs
new file mode 100644
index 000000000..a5863ec12
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings/markdoc.config.mjs
@@ -0,0 +1,3 @@
+import { defineMarkdocConfig } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({});
diff --git a/packages/integrations/markdoc/test/fixtures/headings/package.json b/packages/integrations/markdoc/test/fixtures/headings/package.json
new file mode 100644
index 000000000..1daaae400
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/headings",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/headings/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/headings/src/content/config.ts
new file mode 100644
index 000000000..a142ace11
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const docs = defineCollection({});
+
+export const collections = {
+	docs,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-stale-cache-check.mdoc b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-stale-cache-check.mdoc
new file mode 100644
index 000000000..75cd52884
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-stale-cache-check.mdoc
@@ -0,0 +1,13 @@
+Our heading ID generator can have a stale cache for duplicates. Let's check for those!
+
+# Level 1 heading
+
+## Level **2 heading**
+
+### Level _3 heading_
+
+#### Level [4 heading](/with-a-link)
+
+##### Level 5 heading with override {% #id-override %}
+
+###### Level 6 heading
diff --git a/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-with-special-characters.mdoc b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-with-special-characters.mdoc
new file mode 100644
index 000000000..2d1801014
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-with-special-characters.mdoc
@@ -0,0 +1,3 @@
+## `<Picture />`
+
+### « Sacrebleu ! »
diff --git a/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings.mdoc b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings.mdoc
new file mode 100644
index 000000000..3eb66580a
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings.mdoc
@@ -0,0 +1,11 @@
+# Level 1 heading
+
+## Level **2 heading**
+
+### Level _3 heading_
+
+#### Level [4 heading](/with-a-link)
+
+##### Level 5 heading with override {% #id-override %}
+
+###### Level 6 heading
diff --git a/packages/integrations/markdoc/test/fixtures/headings/src/pages/[slug].astro b/packages/integrations/markdoc/test/fixtures/headings/src/pages/[slug].astro
new file mode 100644
index 000000000..90b021e95
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/headings/src/pages/[slug].astro
@@ -0,0 +1,34 @@
+---
+import { CollectionEntry, getCollection } from "astro:content";
+
+export async function getStaticPaths() {
+	const docs = await getCollection('docs');
+	return docs.map(doc => ({ params: { slug: doc.slug }, props: doc }));
+}
+
+type Props = CollectionEntry<'docs'>;
+
+const { Content, headings } = await Astro.props.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<nav data-toc>
+		<ul>
+			{headings.map(heading => (
+				<li>
+					<a href={`#${heading.slug}`} data-depth={heading.depth}>{heading.text}</a>
+				</li>
+			))}
+		</ul>
+	</nav>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/image-assets/astro.config.mjs
new file mode 100644
index 000000000..6be0918b8
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/astro.config.mjs
@@ -0,0 +1,11 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+import { testImageService } from '../../../../../astro/test/test-image-service.js';
+
+// https://astro.build/config
+export default defineConfig({
+	image: {
+		service: testImageService(),
+	},
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/image-assets/markdoc.config.mjs
new file mode 100644
index 000000000..04fe75244
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/markdoc.config.mjs
@@ -0,0 +1,10 @@
+import { component, defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	tags: {
+		image: {
+			attributes: nodes.image.attributes,
+			render: component('./src/components/Image.astro'),
+		},
+	},
+});
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/package.json b/packages/integrations/markdoc/test/fixtures/image-assets/package.json
new file mode 100644
index 000000000..30df52c2f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/image-assets",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/alias/cityscape.jpg b/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/alias/cityscape.jpg
new file mode 100644
index 000000000..3fe6e5b64
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/alias/cityscape.jpg
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/relative/oar.jpg b/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/relative/oar.jpg
new file mode 100644
index 000000000..a63298b38
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/relative/oar.jpg
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/components/Image.astro b/packages/integrations/markdoc/test/fixtures/image-assets/src/components/Image.astro
new file mode 100644
index 000000000..e572c04d7
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/components/Image.astro
@@ -0,0 +1,22 @@
+---
+import { Image } from 'astro:assets';
+// src/components/MyImage.astro
+import type { ImageMetadata } from 'astro';
+type Props = {
+	src: string | ImageMetadata;
+	alt: string;
+};
+const { src, alt } = Astro.props;
+---
+{
+	typeof src === 'string' ? (
+		<img class="custom-styles" src={src} alt={alt} />
+	) : (
+		<Image class="custom-styles" {src} {alt} />
+	)
+}
+<style>
+	.custom-styles {
+		border: 1px solid red;
+	}
+</style>
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/image-assets/src/content/config.ts
new file mode 100644
index 000000000..a142ace11
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const docs = defineCollection({});
+
+export const collections = {
+	docs,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/content/docs/intro.mdoc b/packages/integrations/markdoc/test/fixtures/image-assets/src/content/docs/intro.mdoc
new file mode 100644
index 000000000..f5ba3950f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/content/docs/intro.mdoc
@@ -0,0 +1,9 @@
+# Image assets
+
+![Favicon](/favicon.svg) {% #public %}
+
+![Oar](../../assets/relative/oar.jpg) {% #relative %}
+
+![Gray cityscape arial view](~/assets/alias/cityscape.jpg) {% #alias %}
+
+{% image src="../../assets/relative/oar.jpg" alt="oar" /%} {% #component %}
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/image-assets/src/pages/index.astro
new file mode 100644
index 000000000..51810b4a8
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from 'astro:content';
+
+const intro = await getEntryBySlug('docs', 'intro');
+const { Content } = await intro.render();
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<Content />
+	</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/public/favicon.svg b/packages/integrations/markdoc/test/fixtures/image-assets/src/public/favicon.svg
new file mode 100644
index 000000000..f157bd1c5
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/tsconfig.json b/packages/integrations/markdoc/test/fixtures/image-assets/tsconfig.json
new file mode 100644
index 000000000..c193287fc
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/image-assets/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/assets/*": ["src/assets/*"]
+    },
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}
diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/propagated-assets/astro.config.mjs
new file mode 100644
index 000000000..1bd8ba93f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/propagated-assets/markdoc.config.mjs
new file mode 100644
index 000000000..cd63c33be
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/markdoc.config.mjs
@@ -0,0 +1,16 @@
+import { component, defineMarkdocConfig } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	tags: {
+		aside: {
+			render: component('./src/components/Aside.astro'),
+			attributes: {
+				type: { type: String },
+				title: { type: String },
+			}
+		},
+		logHello: {
+			render: component('./src/components/LogHello.astro'),
+		}
+	},
+})
diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/package.json b/packages/integrations/markdoc/test/fixtures/propagated-assets/package.json
new file mode 100644
index 000000000..3b51e158d
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-propagated-assets",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/Aside.astro b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/Aside.astro
new file mode 100644
index 000000000..be15e8c0a
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/Aside.astro
@@ -0,0 +1,116 @@
+---
+// Inspired by the `Aside` component from docs.astro.build
+// https://github.com/withastro/starlight/blob/main/packages/starlight/integrations/asides.ts
+
+interface Props {
+	type?: 'note' | 'tip' | 'caution' | 'danger';
+	title?: string;
+}
+
+const labelByType = {
+	note: 'Note',
+	tip: 'Tip',
+	caution: 'Caution',
+	danger: 'Danger',
+};
+const { type = 'note' } = Astro.props as Props;
+const title = Astro.props.title ?? labelByType[type] ?? '';
+
+// SVG icon paths based on GitHub Octicons
+const icons: Record<NonNullable<Props['type']>, { viewBox: string; d: string }> = {
+	note: {
+		viewBox: '0 0 18 18',
+		d: 'M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z',
+	},
+	tip: {
+		viewBox: '0 0 18 18',
+		d: 'M14 0a8.8 8.8 0 0 0-6 2.6l-.5.4-.9 1H3.3a1.8 1.8 0 0 0-1.5.8L.1 7.6a.8.8 0 0 0 .4 1.1l3.1 1 .2.1 2.4 2.4.1.2 1 3a.8.8 0 0 0 1 .5l2.9-1.7a1.8 1.8 0 0 0 .8-1.5V9.5l1-1 .4-.4A8.8 8.8 0 0 0 16 2v-.1A1.8 1.8 0 0 0 14.2 0h-.1zm-3.5 10.6-.3.2L8 12.3l.5 1.8 2-1.2a.3.3 0 0 0 .1-.2v-2zM3.7 8.1l1.5-2.3.2-.3h-2a.3.3 0 0 0-.3.1l-1.2 2 1.8.5zm5.2-4.5a7.3 7.3 0 0 1 5.2-2.1h.1a.3.3 0 0 1 .3.3v.1a7.3 7.3 0 0 1-2.1 5.2l-.5.4a15.2 15.2 0 0 1-2.5 2L7.1 11 5 9l1.5-2.3a15.3 15.3 0 0 1 2-2.5l.4-.5zM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-8.4 9.6a1.5 1.5 0 1 0-2.2-2.2 7 7 0 0 0-1.1 3 .2.2 0 0 0 .3.3c.6 0 2.2-.4 3-1.1z',
+	},
+	caution: {
+		viewBox: '-1 1 18 18',
+		d: 'M8.9 1.5C8.7 1.2 8.4 1 8 1s-.7.2-.9.5l-7 12a1 1 0 0 0 0 1c.2.3.6.5 1 .5H15c.4 0 .7-.2.9-.5a1 1 0 0 0 0-1l-7-12zM9 13H7v-2h2v2zm0-3H7V6h2v4z',
+	},
+	danger: {
+		viewBox: '0 1 14 17',
+		d: 'M5 .3c.9 2.2.5 3.4-.5 4.3C3.5 5.6 2 6.5 1 8c-1.5 2-1.7 6.5 3.5 7.7-2.2-1.2-2.6-4.5-.3-6.6-.6 2 .6 3.3 2 2.8 1.4-.4 2.3.6 2.2 1.7 0 .8-.3 1.4-1 1.8A5.6 5.6 0 0 0 12 10c0-2.9-2.5-3.3-1.3-5.7-1.5.2-2 1.2-1.8 2.8 0 1-1 1.8-2 1.3-.6-.4-.6-1.2 0-1.8C8.2 5.3 8.7 2.5 5 .3z',
+	},
+};
+const { viewBox, d } = icons[type];
+---
+
+<aside class={`content ${type}`} aria-label={title}>
+	<p class="title" aria-hidden="true">
+		<span class="icon">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} width={16} height={16}>
+				<path fill-rule="evenodd" d={d}></path>
+			</svg>
+		</span>
+		{title}
+	</p>
+	<section>
+		<slot />
+	</section>
+</aside>
+
+<style>
+	aside {
+		--color-base-purple: 269, 79%;
+		--color-base-teal: 180, 80%;
+		--color-base-red: 351, 100%;
+		--color-base-yellow: 41, 100%;
+
+		--aside-color-base: var(--color-base-purple);
+		--aside-color-lightness: 54%;
+		--aside-accent-color: hsl(var(--aside-color-base), var(--aside-color-lightness));
+		--aside-text-lightness: 20%;
+		--aside-text-accent-color: hsl(var(--aside-color-base), var(--aside-text-lightness));
+
+		border-inline-start: 4px solid var(--aside-accent-color);
+		padding: 1rem;
+		background-color: hsla(var(--aside-color-base), var(--aside-color-lightness), 0.1);
+		/* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */
+		outline: 1px solid transparent;
+	}
+
+	.title {
+		line-height: 1;
+		margin-bottom: 0.5rem;
+		font-size: 0.9rem;
+		letter-spacing: 0.05em;
+		font-weight: bold;
+		text-transform: uppercase;
+		color: var(--aside-text-accent-color);
+	}
+
+	.icon svg {
+		width: 1.5em;
+		height: 1.5em;
+		vertical-align: middle;
+		fill: currentcolor;
+	}
+
+	aside :global(a),
+	aside :global(a > code:not([class*='language'])) {
+		color: var(--aside-text-accent-color);
+	}
+
+	aside :global(pre) {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	.tip {
+		--aside-color-lightness: 42%;
+		--aside-color-base: var(--color-base-teal);
+	}
+
+	.caution {
+		--aside-color-lightness: 59%;
+		--aside-color-base: var(--color-base-yellow);
+	}
+
+	.danger {
+		--aside-color-lightness: 54%;
+		--aside-color-base: var(--color-base-red);
+	}
+</style>
diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/LogHello.astro b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/LogHello.astro
new file mode 100644
index 000000000..6d994378b
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/LogHello.astro
@@ -0,0 +1,5 @@
+<p>I'm gonna log hello</p>
+
+<script>
+	console.log('hello');
+</script>
diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/scripts.mdoc b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/scripts.mdoc
new file mode 100644
index 000000000..808cffaca
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/scripts.mdoc
@@ -0,0 +1,5 @@
+---
+title: Scripts
+---
+
+{% logHello /%}
diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/styles.mdoc b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/styles.mdoc
new file mode 100644
index 000000000..20960e4cf
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/styles.mdoc
@@ -0,0 +1,9 @@
+---
+title: Styles
+---
+
+{% aside type="tip" %}
+
+## Example
+
+{% /aside %}
diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/src/pages/[slug].astro b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/pages/[slug].astro
new file mode 100644
index 000000000..baee15375
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/pages/[slug].astro
@@ -0,0 +1,26 @@
+---
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+	const posts = await getCollection('blog');
+	return posts.map((post) => ({
+		params: { slug: post.slug },
+		props: post,
+	}));
+}
+
+const { Content } = await Astro.props.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{Astro.props.data.title}</title>
+</head>
+<body>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render with-space/astro.config.mjs
new file mode 100644
index 000000000..1bd8ba93f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render with-space/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/package.json b/packages/integrations/markdoc/test/fixtures/render with-space/package.json
new file mode 100644
index 000000000..daae65443
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render with-space/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-with-space",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc b/packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc
new file mode 100644
index 000000000..2dbe492fe
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc
@@ -0,0 +1,7 @@
+---
+title: Simple post with root folder containing a space
+---
+
+## Simple post with root folder containing a space
+
+This is a simple Markdoc post with root folder containing a space.
diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render with-space/src/content/config.ts
new file mode 100644
index 000000000..629486e48
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render with-space/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const blog = defineCollection({});
+
+export const collections = {
+	blog,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro
new file mode 100644
index 000000000..940eef154
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const post = await getEntryBySlug('blog', 'simple');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-html/astro.config.mjs
new file mode 100644
index 000000000..0872080fe
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [markdoc({ allowHTML: true })],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-html/markdoc.config.ts
new file mode 100644
index 000000000..bbc529f5a
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/markdoc.config.ts
@@ -0,0 +1,19 @@
+import { component, defineMarkdocConfig } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	tags: {
+		aside: {
+			render: component('./src/components/Aside.astro'),
+			attributes: {
+				type: { type: String },
+				title: { type: String },
+			},
+		},
+		mark: {
+			render: component('./src/components/Mark.astro'),
+			attributes: {
+				color: { type: String },
+			},
+		},
+	},
+})
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/package.json b/packages/integrations/markdoc/test/fixtures/render-html/package.json
new file mode 100644
index 000000000..4a0c67bfe
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-html",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/components/Aside.astro b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Aside.astro
new file mode 100644
index 000000000..ed7077dbd
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Aside.astro
@@ -0,0 +1,116 @@
+---
+// Inspired by the `Aside` component from docs.astro.build
+// https://github.com/withastro/starlight/blob/main/packages/starlight/integrations/asides.ts
+
+export interface Props {
+	type?: 'note' | 'tip' | 'caution' | 'danger';
+	title?: string;
+}
+
+const labelByType = {
+	note: 'Note',
+	tip: 'Tip',
+	caution: 'Caution',
+	danger: 'Danger',
+};
+const { type = 'note' } = Astro.props as Props;
+const title = Astro.props.title ?? labelByType[type] ?? '';
+
+// SVG icon paths based on GitHub Octicons
+const icons: Record<NonNullable<Props['type']>, { viewBox: string; d: string }> = {
+	note: {
+		viewBox: '0 0 18 18',
+		d: 'M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z',
+	},
+	tip: {
+		viewBox: '0 0 18 18',
+		d: 'M14 0a8.8 8.8 0 0 0-6 2.6l-.5.4-.9 1H3.3a1.8 1.8 0 0 0-1.5.8L.1 7.6a.8.8 0 0 0 .4 1.1l3.1 1 .2.1 2.4 2.4.1.2 1 3a.8.8 0 0 0 1 .5l2.9-1.7a1.8 1.8 0 0 0 .8-1.5V9.5l1-1 .4-.4A8.8 8.8 0 0 0 16 2v-.1A1.8 1.8 0 0 0 14.2 0h-.1zm-3.5 10.6-.3.2L8 12.3l.5 1.8 2-1.2a.3.3 0 0 0 .1-.2v-2zM3.7 8.1l1.5-2.3.2-.3h-2a.3.3 0 0 0-.3.1l-1.2 2 1.8.5zm5.2-4.5a7.3 7.3 0 0 1 5.2-2.1h.1a.3.3 0 0 1 .3.3v.1a7.3 7.3 0 0 1-2.1 5.2l-.5.4a15.2 15.2 0 0 1-2.5 2L7.1 11 5 9l1.5-2.3a15.3 15.3 0 0 1 2-2.5l.4-.5zM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-8.4 9.6a1.5 1.5 0 1 0-2.2-2.2 7 7 0 0 0-1.1 3 .2.2 0 0 0 .3.3c.6 0 2.2-.4 3-1.1z',
+	},
+	caution: {
+		viewBox: '-1 1 18 18',
+		d: 'M8.9 1.5C8.7 1.2 8.4 1 8 1s-.7.2-.9.5l-7 12a1 1 0 0 0 0 1c.2.3.6.5 1 .5H15c.4 0 .7-.2.9-.5a1 1 0 0 0 0-1l-7-12zM9 13H7v-2h2v2zm0-3H7V6h2v4z',
+	},
+	danger: {
+		viewBox: '0 1 14 17',
+		d: 'M5 .3c.9 2.2.5 3.4-.5 4.3C3.5 5.6 2 6.5 1 8c-1.5 2-1.7 6.5 3.5 7.7-2.2-1.2-2.6-4.5-.3-6.6-.6 2 .6 3.3 2 2.8 1.4-.4 2.3.6 2.2 1.7 0 .8-.3 1.4-1 1.8A5.6 5.6 0 0 0 12 10c0-2.9-2.5-3.3-1.3-5.7-1.5.2-2 1.2-1.8 2.8 0 1-1 1.8-2 1.3-.6-.4-.6-1.2 0-1.8C8.2 5.3 8.7 2.5 5 .3z',
+	},
+};
+const { viewBox, d } = icons[type];
+---
+
+<aside class={`content ${type}`} aria-label={title}>
+	<p class="title" aria-hidden="true">
+		<span class="icon">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} width={16} height={16}>
+				<path fill-rule="evenodd" d={d}></path>
+			</svg>
+		</span>
+		{title}
+	</p>
+	<section>
+		<slot />
+	</section>
+</aside>
+
+<style>
+	aside {
+		--color-base-purple: 269, 79%;
+		--color-base-teal: 180, 80%;
+		--color-base-red: 351, 100%;
+		--color-base-yellow: 41, 100%;
+
+		--aside-color-base: var(--color-base-purple);
+		--aside-color-lightness: 54%;
+		--aside-accent-color: hsl(var(--aside-color-base), var(--aside-color-lightness));
+		--aside-text-lightness: 20%;
+		--aside-text-accent-color: hsl(var(--aside-color-base), var(--aside-text-lightness));
+
+		border-inline-start: 4px solid var(--aside-accent-color);
+		padding: 1rem;
+		background-color: hsla(var(--aside-color-base), var(--aside-color-lightness), 0.1);
+		/* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */
+		outline: 1px solid transparent;
+	}
+
+	.title {
+		line-height: 1;
+		margin-bottom: 0.5rem;
+		font-size: 0.9rem;
+		letter-spacing: 0.05em;
+		font-weight: bold;
+		text-transform: uppercase;
+		color: var(--aside-text-accent-color);
+	}
+
+	.icon svg {
+		width: 1.5em;
+		height: 1.5em;
+		vertical-align: middle;
+		fill: currentcolor;
+	}
+
+	aside :global(a),
+	aside :global(a > code:not([class*='language'])) {
+		color: var(--aside-text-accent-color);
+	}
+
+	aside :global(pre) {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	.tip {
+		--aside-color-lightness: 42%;
+		--aside-color-base: var(--color-base-teal);
+	}
+
+	.caution {
+		--aside-color-lightness: 59%;
+		--aside-color-base: var(--color-base-yellow);
+	}
+
+	.danger {
+		--aside-color-lightness: 54%;
+		--aside-color-base: var(--color-base-red);
+	}
+</style>
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/components/Mark.astro b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Mark.astro
new file mode 100644
index 000000000..7d0b6c9fb
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Mark.astro
@@ -0,0 +1,11 @@
+---
+
+export interface Props {
+	color?: 'hotpink' | 'blue';
+}
+
+const { color } = Astro.props;
+
+---
+
+<span style={`color: ${color}`} class="mark"><slot /></span>
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/_partial.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/_partial.mdoc
new file mode 100644
index 000000000..f8774e911
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/_partial.mdoc
@@ -0,0 +1,5 @@
+## HTML in a partial
+
+<ul>
+	<li id="partial">List item</li>
+</ul>
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/components.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/components.mdoc
new file mode 100644
index 000000000..55890ce09
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/components.mdoc
@@ -0,0 +1,47 @@
+---
+title: Welcome to Markdoc 👋
+---
+
+This is a {% mark color="hotpink" %}inline mark{% /mark %} in regular Markdown markup.
+
+<p id="p1">This is a {% mark color="hotpink" %}inline mark{% /mark %} under some HTML</p>
+
+<div id="div1">
+  <p id="div1-p1">This is a {% mark color="hotpink" %}inline mark{% /mark %} under some HTML</p>
+  <p id="div1-p2">This is a <span id="div1-p2-span1">{% mark color="hotpink" %}inline mark{% /mark %}</span> under some HTML</p>
+</div> 
+
+{% aside title="Aside One" type="tip" %}
+
+I'm a Markdown paragraph inside an top-level aside tag
+
+## I'm an H2 via Markdown markup
+
+<h2 id="h-two">I'm an H2 via HTML markup</h2>
+
+**Markdown bold** vs <strong>HTML bold</strong>
+
+RENDERED
+
+{% if $revealSecret %}
+NOT RENDERED
+{% /if %}
+
+{% if $revealSecret %}NOT RENDERED{% /if %}
+
+{% /aside %}
+
+<section id="section1">
+  <div id="div1">
+{% aside title="Nested un-indented Aside" type="tip" %}
+regular Markdown markup
+<p id="p4">nested {% mark color="hotpink" %}inline mark{% /mark %} content</p>
+{% /aside %}
+  </div>
+  <div id="div2">
+    {% aside title="Nested indented Aside 💀" type="tip" %}
+    regular Markdown markup
+    <p id="p5">nested {% mark color="hotpink" %}inline<span id="inception-span"> mark</span>{% /mark %} content</p>
+    {% /aside %}
+  </div>
+</section>
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/nested-html.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/nested-html.mdoc
new file mode 100644
index 000000000..161d128bf
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/nested-html.mdoc
@@ -0,0 +1,18 @@
+---
+title: Simple post
+---
+<p id="p1">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p>
+<p id="p2">
+  before
+  <span class="inner-class" id="inner1" style="color: hotpink;">inner</span>
+  after
+</p>
+<div id="div-l1">
+  <div id="div-l2-1">
+    <p id="p3">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p>
+  </div>
+  <div id="div-l2-2">
+    <p id="p4">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p>
+    <p id="p5">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/randomly-cased-html-attributes.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/randomly-cased-html-attributes.mdoc
new file mode 100644
index 000000000..18c62bd59
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/randomly-cased-html-attributes.mdoc
@@ -0,0 +1,20 @@
+---
+title: Simple post
+---
+
+<table>
+  <thead>
+    <tr>
+      <th>one</th>
+      <th>two</th>
+      <th>three</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td id="td1" rowspan="2" colspan="3">three wide and two tall</td></tr>
+    <tr><td id="td2" ROWSPAN="2" COLSPAN="3">three wide and two tall</td></tr>
+    <tr><td id="td3" rowSpan="2" colSpan="3">three wide and two tall</td></tr>
+    <tr><td id="td4" RowSpan="2" ColSpan="3">three wide and two tall</td></tr>
+    </tr>
+  </tbody>
+</table>
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc
new file mode 100644
index 000000000..30b9b7f8f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc
@@ -0,0 +1,15 @@
+---
+title: Simple post
+---
+
+## Simple <span class="inside-h2" style="color: fuscia">post</span> header
+
+This is a simple Markdoc <span class="post-class" style="color: hotpink;">post</span>.
+
+<p>This is a paragraph!</p>
+
+<p>This is a <span class="inside-p">span</span> inside a paragraph!</p>
+
+<video
+	src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExejZnbmN6ODlxOWk2djVmcnFkMjIwbmFnZGFtZ2J4aG52dzVvbjJlaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/H1vJZzQAiILUUq0FUL/giphy.mp4"
+	autoplay muted></video>
\ No newline at end of file
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/with-partial.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/with-partial.mdoc
new file mode 100644
index 000000000..c42d3cd70
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/with-partial.mdoc
@@ -0,0 +1,5 @@
+---
+title: With Partial
+---
+
+{% partial file="./_partial.mdoc" /%}
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-html/src/content/config.ts
new file mode 100644
index 000000000..629486e48
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const blog = defineCollection({});
+
+export const collections = {
+	blog,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/pages/[slug].astro b/packages/integrations/markdoc/test/fixtures/render-html/src/pages/[slug].astro
new file mode 100644
index 000000000..bea51d3b5
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-html/src/pages/[slug].astro
@@ -0,0 +1,29 @@
+---
+import { getCollection, getEntryBySlug } from "astro:content";
+
+const { slug } = Astro.params;
+
+const post = await getEntryBySlug('blog', slug);
+const { Content } = await post.render();
+
+export async function getStaticPaths() {
+  const blogEntries = await getCollection('blog');
+  return blogEntries.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}
+
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/render-null/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-null/astro.config.mjs
new file mode 100644
index 000000000..1bd8ba93f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-null/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs
new file mode 100644
index 000000000..5db65fddd
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs
@@ -0,0 +1,15 @@
+import { defineMarkdocConfig, nodes, component } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	nodes: {
+		document: {
+			...nodes.document,
+			render: null,
+		},
+	},
+	tags: {
+		'div-wrapper': {
+			render: component('./src/components/DivWrapper.astro'),
+		},
+	},
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-null/package.json b/packages/integrations/markdoc/test/fixtures/render-null/package.json
new file mode 100644
index 000000000..e9529b693
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-null/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-null",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-null/src/components/DivWrapper.astro b/packages/integrations/markdoc/test/fixtures/render-null/src/components/DivWrapper.astro
new file mode 100644
index 000000000..942a11945
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-null/src/components/DivWrapper.astro
@@ -0,0 +1 @@
+<div class="div-wrapper"><slot /></div>
diff --git a/packages/integrations/markdoc/test/fixtures/render-null/src/content/blog/render-null.mdoc b/packages/integrations/markdoc/test/fixtures/render-null/src/content/blog/render-null.mdoc
new file mode 100644
index 000000000..f85ebebd1
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-null/src/content/blog/render-null.mdoc
@@ -0,0 +1,13 @@
+---
+title: Post with render null
+---
+
+## Post with render null
+
+This should render the contents inside a fragment!
+
+{% div-wrapper %}
+
+I'm inside a div wrapper
+
+{% /div-wrapper %}
diff --git a/packages/integrations/markdoc/test/fixtures/render-null/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-null/src/content/config.ts
new file mode 100644
index 000000000..629486e48
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-null/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const blog = defineCollection({});
+
+export const collections = {
+	blog,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/render-null/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-null/src/pages/index.astro
new file mode 100644
index 000000000..ed8417c5b
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-null/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const post = await getEntryBySlug('blog', 'render-null');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-partials/astro.config.mjs
new file mode 100644
index 000000000..1bd8ba93f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-partials/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-partials/markdoc.config.ts
new file mode 100644
index 000000000..c9762aed5
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-partials/markdoc.config.ts
@@ -0,0 +1,7 @@
+import { Markdoc, defineMarkdocConfig } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	partials: {
+		configured: Markdoc.parse('# Configured partial {% #configured %}'),
+	},
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/package.json b/packages/integrations/markdoc/test/fixtures/render-partials/package.json
new file mode 100644
index 000000000..021e1c2d9
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-partials/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-partials",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/_partial.mdoc b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/_partial.mdoc
new file mode 100644
index 000000000..4ace9a9d3
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/_partial.mdoc
@@ -0,0 +1,3 @@
+## Partial {% #top %}
+
+{% partial file="../nested/_partial.mdoc" /%}
diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/with-partials.mdoc b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/with-partials.mdoc
new file mode 100644
index 000000000..2d9a87110
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/with-partials.mdoc
@@ -0,0 +1,7 @@
+---
+title: Post with partials
+---
+
+{% partial file="_partial.mdoc" /%}
+
+{% partial file="configured" /%}
diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/config.ts
new file mode 100644
index 000000000..629486e48
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const blog = defineCollection({});
+
+export const collections = {
+	blog,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/src/content/nested/_partial.mdoc b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/nested/_partial.mdoc
new file mode 100644
index 000000000..4193609bf
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/nested/_partial.mdoc
@@ -0,0 +1 @@
+## Nested partial {% #nested %}
diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-partials/src/pages/index.astro
new file mode 100644
index 000000000..e9549f314
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-partials/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from 'astro:content';
+
+const post = await getEntryBySlug('blog', 'with-partials');
+const { Content } = await post.render();
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Content</title>
+	</head>
+	<body>
+		<Content />
+	</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/render-simple/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-simple/astro.config.mjs
new file mode 100644
index 000000000..1bd8ba93f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-simple/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-simple/package.json b/packages/integrations/markdoc/test/fixtures/render-simple/package.json
new file mode 100644
index 000000000..9354cdc58
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-simple/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-simple",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-simple/src/content/blog/simple.mdoc b/packages/integrations/markdoc/test/fixtures/render-simple/src/content/blog/simple.mdoc
new file mode 100644
index 000000000..557f7b8e5
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-simple/src/content/blog/simple.mdoc
@@ -0,0 +1,7 @@
+---
+title: Simple post
+---
+
+## Simple post
+
+This is a simple Markdoc post.
diff --git a/packages/integrations/markdoc/test/fixtures/render-simple/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-simple/src/content/config.ts
new file mode 100644
index 000000000..629486e48
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-simple/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const blog = defineCollection({});
+
+export const collections = {
+	blog,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/render-simple/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-simple/src/pages/index.astro
new file mode 100644
index 000000000..940eef154
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-simple/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const post = await getEntryBySlug('blog', 'simple');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-typographer/astro.config.mjs
new file mode 100644
index 000000000..408e036c7
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-typographer/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc({ typographer: true })],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/package.json b/packages/integrations/markdoc/test/fixtures/render-typographer/package.json
new file mode 100644
index 000000000..02fd6788f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-typographer/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-typographer",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/blog/typographer.mdoc b/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/blog/typographer.mdoc
new file mode 100644
index 000000000..2180e7a47
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/blog/typographer.mdoc
@@ -0,0 +1,7 @@
+---
+title: Typographer
+---
+
+## Typographer's post
+
+This is a post to test the "typographer" option.
diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/config.ts
new file mode 100644
index 000000000..629486e48
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const blog = defineCollection({});
+
+export const collections = {
+	blog,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-typographer/src/pages/index.astro
new file mode 100644
index 000000000..88fc531fa
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-typographer/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const post = await getEntryBySlug('blog', 'typographer');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<Content />
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-with-components/astro.config.mjs
new file mode 100644
index 000000000..3023497aa
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/astro.config.mjs
@@ -0,0 +1,8 @@
+import markdoc from '@astrojs/markdoc';
+import preact from '@astrojs/preact';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc(), preact()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-with-components/markdoc.config.ts
new file mode 100644
index 000000000..6093ec593
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/markdoc.config.ts
@@ -0,0 +1,32 @@
+import { Markdoc, component, defineMarkdocConfig } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	nodes: {
+		fence: {
+			render: component('./src/components/Code.astro'),
+			attributes: {
+				language: { type: String },
+				content: { type: String },
+			},
+		},
+	},
+	tags: {
+		'marquee-element': {
+			render: component('./src/components/CustomMarquee.astro'),
+			attributes: {
+				direction: {
+					type: String,
+					default: 'left',
+					matches: ['left', 'right', 'up', 'down'],
+					errorLevel: 'critical',
+				},
+			},
+		},
+		counter: {
+			render: component('./src/components/CounterWrapper.astro'),
+		},
+		'deeply-nested': {
+			render: component('./src/components/DeeplyNested.astro'),
+		},
+	},
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/package.json b/packages/integrations/markdoc/test/fixtures/render-with-components/package.json
new file mode 100644
index 000000000..c8cadbc37
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@test/markdoc-render-with-components",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "@astrojs/preact": "workspace:*",
+    "astro": "workspace:*",
+    "preact": "^10.26.5"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Code.astro b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Code.astro
new file mode 100644
index 000000000..18bf1399f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Code.astro
@@ -0,0 +1,12 @@
+---
+import { Code } from 'astro/components';
+
+type Props = {
+	content: string;
+	language: string;
+}
+
+const { content, language } = Astro.props as Props;
+---
+
+<Code lang={language} code={content} />
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Counter.tsx b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Counter.tsx
new file mode 100644
index 000000000..f1e239718
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Counter.tsx
@@ -0,0 +1,10 @@
+import { useState } from 'preact/hooks';
+
+export default function Counter() {
+	const [count, setCount] = useState(1);
+	return (
+		<button id="counter" onClick={() => setCount(count + 1)}>
+			{count}
+		</button>
+	);
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CounterWrapper.astro b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CounterWrapper.astro
new file mode 100644
index 000000000..e45ac6438
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CounterWrapper.astro
@@ -0,0 +1,5 @@
+---
+import Counter from './Counter';
+---
+
+<Counter client:load />
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CustomMarquee.astro b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CustomMarquee.astro
new file mode 100644
index 000000000..3108b9973
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CustomMarquee.astro
@@ -0,0 +1 @@
+<marquee data-custom-marquee {...Astro.props}><slot /></marquee>
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/DeeplyNested.astro b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/DeeplyNested.astro
new file mode 100644
index 000000000..eb23f675a
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/DeeplyNested.astro
@@ -0,0 +1,5 @@
+---
+
+---
+
+<p id="deeply-nested">Deeply nested partial</p>
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/_nested.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/_nested.mdoc
new file mode 100644
index 000000000..68f529280
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/_nested.mdoc
@@ -0,0 +1,3 @@
+Render components from a deeply nested partial:
+
+{% deeply-nested /%}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/_counter.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/_counter.mdoc
new file mode 100644
index 000000000..4a015695c
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/_counter.mdoc
@@ -0,0 +1,7 @@
+# Hello from a partial!
+
+Render a component from a partial:
+
+{% counter /%}
+
+{% partial file="../_nested.mdoc" /%}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/with-components.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/with-components.mdoc
new file mode 100644
index 000000000..0d1ec835c
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/with-components.mdoc
@@ -0,0 +1,28 @@
+---
+title: Post with components
+---
+
+## Post with components
+
+This uses a custom marquee component with a shortcode:
+
+{% marquee-element direction="right" %}
+I'm a marquee too!
+{% /marquee-element %}
+
+{% partial file="_counter.mdoc" /%}
+
+And a code component for code blocks:
+
+```js
+const isRenderedWithShiki = true;
+```
+
+{% if equals("true", "true") %}
+Inside truthy
+
+```js
+const isRenderedWithShikiInside = true;
+```
+
+{% /if %}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/config.ts
new file mode 100644
index 000000000..629486e48
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const blog = defineCollection({});
+
+export const collections = {
+	blog,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-with-components/src/pages/index.astro
new file mode 100644
index 000000000..52239acce
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const post = await getEntryBySlug('blog', 'with-components');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/tsconfig.json b/packages/integrations/markdoc/test/fixtures/render-with-components/tsconfig.json
new file mode 100644
index 000000000..f993eddf6
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-components/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}
\ No newline at end of file
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-with-config/astro.config.mjs
new file mode 100644
index 000000000..1bd8ba93f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-config/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-with-config/markdoc.config.ts
new file mode 100644
index 000000000..c43ee93a3
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-config/markdoc.config.ts
@@ -0,0 +1,15 @@
+import { defineMarkdocConfig } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	variables: {
+		countries: ['ES', 'JP'],
+	},
+	functions: {
+		includes: {
+			transform(parameters) {
+				const [array, value] = Object.values(parameters);
+				return Array.isArray(array) ? array.includes(value) : false;
+			},
+		},
+	},
+})
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/package.json b/packages/integrations/markdoc/test/fixtures/render-with-config/package.json
new file mode 100644
index 000000000..d4751388c
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-config/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-with-config",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/blog/with-config.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/blog/with-config.mdoc
new file mode 100644
index 000000000..5376404ea
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/blog/with-config.mdoc
@@ -0,0 +1,13 @@
+---
+title: Post with config
+---
+
+## Post with config
+
+{% if includes($countries, "EN") %} Hello {% /if %}
+{% if includes($countries, "ES") %} Hola {% /if %}
+{% if includes($countries, "JP") %} Konnichiwa {% /if %}
+
+## Runtime variables
+
+{% $runtimeVariable %} {% #runtime-variable %}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/config.ts
new file mode 100644
index 000000000..629486e48
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const blog = defineCollection({});
+
+export const collections = {
+	blog,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-with-config/src/pages/index.astro
new file mode 100644
index 000000000..616d5ec0a
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-config/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const post = await getEntryBySlug('blog', 'with-config');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<Content runtimeVariable="working!" />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/astro.config.mjs
new file mode 100644
index 000000000..1bd8ba93f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/markdoc.config.ts
new file mode 100644
index 000000000..8daba3746
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/markdoc.config.ts
@@ -0,0 +1,31 @@
+import { component, defineMarkdocConfig } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	extends: [preset()],
+});
+
+function preset() {
+	return {
+		nodes: {
+			fence: {
+				render: component('./src/components/Code.astro'),
+				attributes: {
+					language: { type: String },
+					content: { type: String },
+				},
+			},
+		},
+		tags: {
+			'marquee-element': {
+				render: component('./src/components/CustomMarquee.astro'),
+				attributes: {
+					direction: {
+						type: String,
+						default: 'left',
+						matches: ['left', 'right', 'up', 'down'],
+					},
+				},
+			},
+		},
+	}
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/package.json b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/package.json
new file mode 100644
index 000000000..962a2b8a7
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-with-extends-components",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/Code.astro b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/Code.astro
new file mode 100644
index 000000000..18bf1399f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/Code.astro
@@ -0,0 +1,12 @@
+---
+import { Code } from 'astro/components';
+
+type Props = {
+	content: string;
+	language: string;
+}
+
+const { content, language } = Astro.props as Props;
+---
+
+<Code lang={language} code={content} />
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/CustomMarquee.astro b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/CustomMarquee.astro
new file mode 100644
index 000000000..3108b9973
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/CustomMarquee.astro
@@ -0,0 +1 @@
+<marquee data-custom-marquee {...Astro.props}><slot /></marquee>
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/blog/with-components.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/blog/with-components.mdoc
new file mode 100644
index 000000000..8ff944b06
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/blog/with-components.mdoc
@@ -0,0 +1,26 @@
+---
+title: Post with components
+---
+
+## Post with components
+
+This uses a custom marquee component with a shortcode:
+
+{% marquee-element direction="right" %}
+I'm a marquee too!
+{% /marquee-element %}
+
+And a code component for code blocks:
+
+```js
+const isRenderedWithShiki = true;
+```
+
+{% if equals("true", "true") %}
+Inside truthy
+
+```js
+const isRenderedWithShikiInside = true;
+```
+
+{% /if %}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/config.ts
new file mode 100644
index 000000000..629486e48
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const blog = defineCollection({});
+
+export const collections = {
+	blog,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/pages/index.astro
new file mode 100644
index 000000000..52239acce
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const post = await getEntryBySlug('blog', 'with-components');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/astro.config.mjs
new file mode 100644
index 000000000..e690d7757
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc({ ignoreIndentation: true })],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/markdoc.config.ts
new file mode 100644
index 000000000..2016327a8
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/markdoc.config.ts
@@ -0,0 +1,26 @@
+import { component, defineMarkdocConfig } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	nodes: {
+		fence: {
+			render: component('./src/components/Code.astro'),
+			attributes: {
+				language: { type: String },
+				content: { type: String },
+			},
+		},
+	},
+	tags: {
+		'marquee-element': {
+			render: component('./src/components/CustomMarquee.astro'),
+			attributes: {
+				direction: {
+					type: String,
+					default: 'left',
+					matches: ['left', 'right', 'up', 'down'],
+					errorLevel: 'critical',
+				},
+			},
+		},
+	},
+})
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/package.json b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/package.json
new file mode 100644
index 000000000..3c1d0a7b5
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-with-indented-components",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/Code.astro b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/Code.astro
new file mode 100644
index 000000000..18bf1399f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/Code.astro
@@ -0,0 +1,12 @@
+---
+import { Code } from 'astro/components';
+
+type Props = {
+	content: string;
+	language: string;
+}
+
+const { content, language } = Astro.props as Props;
+---
+
+<Code lang={language} code={content} />
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/CustomMarquee.astro b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/CustomMarquee.astro
new file mode 100644
index 000000000..3108b9973
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/CustomMarquee.astro
@@ -0,0 +1 @@
+<marquee data-custom-marquee {...Astro.props}><slot /></marquee>
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/blog/with-indented-components.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/blog/with-indented-components.mdoc
new file mode 100644
index 000000000..a52b35fc4
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/blog/with-indented-components.mdoc
@@ -0,0 +1,24 @@
+---
+title: Post with indented components
+---
+
+## Post with indented components
+
+This uses a custom marquee component with a shortcode:
+
+{% marquee-element direction="right" %}
+	I'm a marquee too!
+
+	{% marquee-element direction="right" %}
+		I'm an indented marquee!
+
+		### I am an h3!
+	{% /marquee-element %}
+
+	And a nested code block:
+
+	```js
+	const isRenderedWithShiki = true;
+	```
+{% /marquee-element %}
+
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/config.ts
new file mode 100644
index 000000000..629486e48
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+
+const blog = defineCollection({});
+
+export const collections = {
+	blog,
+};
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/pages/index.astro
new file mode 100644
index 000000000..0ae7ed4c9
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const post = await getEntryBySlug('blog', 'with-indented-components');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/fixtures/variables/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/variables/astro.config.mjs
new file mode 100644
index 000000000..1bd8ba93f
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/variables/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/variables/package.json b/packages/integrations/markdoc/test/fixtures/variables/package.json
new file mode 100644
index 000000000..0ac7a3c82
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/variables/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-variables",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/markdoc/test/fixtures/variables/src/content/blog/entry.mdoc b/packages/integrations/markdoc/test/fixtures/variables/src/content/blog/entry.mdoc
new file mode 100644
index 000000000..151d5a81d
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/variables/src/content/blog/entry.mdoc
@@ -0,0 +1,9 @@
+---
+title: Test entry
+---
+
+# {% $entry.data.title %}
+
+- id: {% $entry.id %} {% #id %}
+- slug: {% $entry.slug %} {% #slug %}
+- collection: {% $entry.collection %} {% #collection %}
diff --git a/packages/integrations/markdoc/test/fixtures/variables/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/variables/src/content/config.ts
new file mode 100644
index 000000000..ff473d4af
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/variables/src/content/config.ts
@@ -0,0 +1,9 @@
+import { defineCollection, z } from 'astro:content';
+
+const blog = defineCollection({
+	schema: z.object({
+		title: z.string().transform(v => 'Processed by schema: ' + v),
+	}),
+});
+
+export const collections = { blog }
diff --git a/packages/integrations/markdoc/test/fixtures/variables/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/variables/src/pages/index.astro
new file mode 100644
index 000000000..a2766faf0
--- /dev/null
+++ b/packages/integrations/markdoc/test/fixtures/variables/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from 'astro:content';
+
+const entry = await getEntryBySlug('blog', 'entry');
+const { Content } = await entry.render();
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<Content {entry} />
+	</body>
+</html>
diff --git a/packages/integrations/markdoc/test/headings.test.js b/packages/integrations/markdoc/test/headings.test.js
new file mode 100644
index 000000000..1a6061aa6
--- /dev/null
+++ b/packages/integrations/markdoc/test/headings.test.js
@@ -0,0 +1,264 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+async function getFixture(name) {
+	return await loadFixture({
+		root: new URL(`./fixtures/${name}/`, import.meta.url),
+	});
+}
+
+describe('experimental.headingIdCompat', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL(`./fixtures/headings/`, import.meta.url),
+			experimental: { headingIdCompat: true },
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('applies IDs to headings containing special characters', async () => {
+			const res = await fixture.fetch('/headings-with-special-characters');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			assert.equal(document.querySelector('h2')?.id, 'picture-');
+			assert.equal(document.querySelector('h3')?.id, '-sacrebleu--');
+		});
+	});
+});
+
+describe('Markdoc - Headings', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await getFixture('headings');
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('applies IDs to headings', async () => {
+			const res = await fixture.fetch('/headings');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			idTest(document);
+		});
+
+		it('applies IDs to headings containing special characters', async () => {
+			const res = await fixture.fetch('/headings-with-special-characters');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			assert.equal(document.querySelector('h2')?.id, 'picture');
+			assert.equal(document.querySelector('h3')?.id, '-sacrebleu-');
+		});
+
+		it('generates the same IDs for other documents with the same headings', async () => {
+			const res = await fixture.fetch('/headings-stale-cache-check');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			idTest(document);
+		});
+
+		it('generates a TOC with correct info', async () => {
+			const res = await fixture.fetch('/headings');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			tocTest(document);
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('applies IDs to headings', async () => {
+			const html = await fixture.readFile('/headings/index.html');
+			const { document } = parseHTML(html);
+
+			idTest(document);
+		});
+
+		it('generates the same IDs for other documents with the same headings', async () => {
+			const html = await fixture.readFile('/headings-stale-cache-check/index.html');
+			const { document } = parseHTML(html);
+
+			idTest(document);
+		});
+
+		it('generates a TOC with correct info', async () => {
+			const html = await fixture.readFile('/headings/index.html');
+			const { document } = parseHTML(html);
+
+			tocTest(document);
+		});
+	});
+});
+
+describe('Markdoc - Headings with custom Astro renderer', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await getFixture('headings-custom');
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('applies IDs to headings', async () => {
+			const res = await fixture.fetch('/headings');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			idTest(document);
+		});
+
+		it('generates the same IDs for other documents with the same headings', async () => {
+			const res = await fixture.fetch('/headings-stale-cache-check');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			idTest(document);
+		});
+
+		it('generates a TOC with correct info', async () => {
+			const res = await fixture.fetch('/headings');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			tocTest(document);
+		});
+
+		it('renders Astro component for each heading', async () => {
+			const res = await fixture.fetch('/headings');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			astroComponentTest(document);
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('applies IDs to headings', async () => {
+			const html = await fixture.readFile('/headings/index.html');
+			const { document } = parseHTML(html);
+
+			idTest(document);
+		});
+
+		it('generates the same IDs for other documents with the same headings', async () => {
+			const html = await fixture.readFile('/headings-stale-cache-check/index.html');
+			const { document } = parseHTML(html);
+
+			idTest(document);
+		});
+
+		it('generates a TOC with correct info', async () => {
+			const html = await fixture.readFile('/headings/index.html');
+			const { document } = parseHTML(html);
+
+			tocTest(document);
+		});
+
+		it('renders Astro component for each heading', async () => {
+			const html = await fixture.readFile('/headings/index.html');
+			const { document } = parseHTML(html);
+
+			astroComponentTest(document);
+		});
+	});
+});
+
+const depthToHeadingMap = {
+	1: {
+		slug: 'level-1-heading',
+		text: 'Level 1 heading',
+	},
+	2: {
+		slug: 'level-2-heading',
+		text: 'Level 2 heading',
+	},
+	3: {
+		slug: 'level-3-heading',
+		text: 'Level 3 heading',
+	},
+	4: {
+		slug: 'level-4-heading',
+		text: 'Level 4 heading',
+	},
+	5: {
+		slug: 'id-override',
+		text: 'Level 5 heading with override',
+	},
+	6: {
+		slug: 'level-6-heading',
+		text: 'Level 6 heading',
+	},
+};
+
+/** @param {Document} document */
+function idTest(document) {
+	for (const [depth, info] of Object.entries(depthToHeadingMap)) {
+		assert.equal(document.querySelector(`h${depth}`)?.getAttribute('id'), info.slug);
+	}
+}
+
+/** @param {Document} document */
+function tocTest(document) {
+	const toc = document.querySelector('[data-toc] > ul');
+	assert.equal(toc.children.length, Object.keys(depthToHeadingMap).length);
+
+	for (const [depth, info] of Object.entries(depthToHeadingMap)) {
+		const linkEl = toc.querySelector(`a[href="#${info.slug}"]`);
+		assert.ok(linkEl);
+		assert.equal(linkEl.getAttribute('data-depth'), depth);
+		assert.equal(linkEl.textContent.trim(), info.text);
+	}
+}
+
+/** @param {Document} document */
+function astroComponentTest(document) {
+	const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+	for (const heading of headings) {
+		assert.equal(heading.hasAttribute('data-custom-heading'), true);
+	}
+}
diff --git a/packages/integrations/markdoc/test/image-assets.test.js b/packages/integrations/markdoc/test/image-assets.test.js
new file mode 100644
index 000000000..793bf1be6
--- /dev/null
+++ b/packages/integrations/markdoc/test/image-assets.test.js
@@ -0,0 +1,93 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+const root = new URL('./fixtures/image-assets/', import.meta.url);
+
+describe('Markdoc - Image assets', () => {
+	let baseFixture;
+
+	before(async () => {
+		baseFixture = await loadFixture({
+			root,
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await baseFixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('uses public/ image paths unchanged', async () => {
+			const res = await baseFixture.fetch('/');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+			assert.equal(document.querySelector('#public > img')?.src, '/favicon.svg');
+		});
+
+		it('transforms relative image paths to optimized path', async () => {
+			const res = await baseFixture.fetch('/');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+			assert.match(
+				document.querySelector('#relative > img')?.src,
+				/\/_image\?href=.*%2Fsrc%2Fassets%2Frelative%2Foar.jpg%3ForigWidth%3D420%26origHeight%3D630%26origFormat%3Djpg&w=420&h=630&f=webp/,
+			);
+		});
+
+		it('transforms aliased image paths to optimized path', async () => {
+			const res = await baseFixture.fetch('/');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+			assert.match(
+				document.querySelector('#alias > img')?.src,
+				/\/_image\?href=.*%2Fsrc%2Fassets%2Falias%2Fcityscape.jpg%3ForigWidth%3D420%26origHeight%3D280%26origFormat%3Djpg&w=420&h=280&f=webp/,
+			);
+		});
+
+		it('passes images inside image tags to configured image component', async () => {
+			const res = await baseFixture.fetch('/');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+			assert.equal(document.querySelector('#component > img')?.className, 'custom-styles');
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await baseFixture.build();
+		});
+
+		it('uses public/ image paths unchanged', async () => {
+			const html = await baseFixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+			assert.equal(document.querySelector('#public > img')?.src, '/favicon.svg');
+		});
+
+		it('transforms relative image paths to optimized path', async () => {
+			const html = await baseFixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+			assert.match(document.querySelector('#relative > img')?.src, /^\/_astro\/oar.*\.webp$/);
+		});
+
+		it('transforms aliased image paths to optimized path', async () => {
+			const html = await baseFixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+			assert.match(document.querySelector('#alias > img')?.src, /^\/_astro\/cityscape.*\.webp$/);
+		});
+
+		it('passes images inside image tags to configured image component', async () => {
+			const html = await baseFixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+			assert.equal(document.querySelector('#component > img')?.className, 'custom-styles');
+			assert.match(document.querySelector('#component > img')?.src, /^\/_astro\/oar.*\.webp$/);
+		});
+	});
+});
diff --git a/packages/integrations/markdoc/test/propagated-assets.test.js b/packages/integrations/markdoc/test/propagated-assets.test.js
new file mode 100644
index 000000000..a0768448f
--- /dev/null
+++ b/packages/integrations/markdoc/test/propagated-assets.test.js
@@ -0,0 +1,69 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('Markdoc - propagated assets', () => {
+	let fixture;
+	let devServer;
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/propagated-assets/', import.meta.url),
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
+		});
+	});
+
+	const modes = ['dev', 'prod'];
+
+	for (const mode of modes) {
+		describe(mode, () => {
+			/** @type {Document} */
+			let stylesDocument;
+			/** @type {Document} */
+			let scriptsDocument;
+
+			before(async () => {
+				if (mode === 'prod') {
+					await fixture.build();
+					stylesDocument = parseHTML(await fixture.readFile('/styles/index.html')).document;
+					scriptsDocument = parseHTML(await fixture.readFile('/scripts/index.html')).document;
+				} else if (mode === 'dev') {
+					devServer = await fixture.startDevServer();
+					const styleRes = await fixture.fetch('/styles');
+					const scriptRes = await fixture.fetch('/scripts');
+					stylesDocument = parseHTML(await styleRes.text()).document;
+					scriptsDocument = parseHTML(await scriptRes.text()).document;
+				}
+			});
+
+			after(async () => {
+				if (mode === 'dev') devServer?.stop();
+			});
+
+			it('Bundles styles', async () => {
+				let styleContents;
+				if (mode === 'dev') {
+					const styles = stylesDocument.querySelectorAll('style');
+					assert.equal(styles.length, 1);
+					styleContents = styles[0].textContent;
+				} else {
+					const links = stylesDocument.querySelectorAll('link[rel="stylesheet"]');
+					assert.equal(links.length, 1);
+					styleContents = await fixture.readFile(links[0].href);
+				}
+				assert.equal(styleContents.includes('--color-base-purple: 269, 79%;'), true);
+			});
+
+			it('[fails] Does not bleed styles to other page', async () => {
+				if (mode === 'dev') {
+					const styles = scriptsDocument.querySelectorAll('style');
+					assert.equal(styles.length, 0);
+				} else {
+					const links = scriptsDocument.querySelectorAll('link[rel="stylesheet"]');
+					assert.equal(links.length, 0);
+				}
+			});
+		});
+	}
+});
diff --git a/packages/integrations/markdoc/test/render-components.test.js b/packages/integrations/markdoc/test/render-components.test.js
new file mode 100644
index 000000000..e8ddec909
--- /dev/null
+++ b/packages/integrations/markdoc/test/render-components.test.js
@@ -0,0 +1,94 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+const root = new URL('./fixtures/render-with-components/', import.meta.url);
+
+describe('Markdoc - render components', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root,
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('renders content - with components', async () => {
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderComponentsChecks(html);
+		});
+
+		it('renders content - with components inside partials', async () => {
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderComponentsInsidePartialsChecks(html);
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('renders content - with components', async () => {
+			const html = await fixture.readFile('/index.html');
+
+			renderComponentsChecks(html);
+		});
+
+		it('renders content - with components inside partials', async () => {
+			const html = await fixture.readFile('/index.html');
+
+			renderComponentsInsidePartialsChecks(html);
+		});
+	});
+});
+
+/** @param {string} html */
+function renderComponentsChecks(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	assert.equal(h2.textContent, 'Post with components');
+
+	// Renders custom shortcode component
+	const marquee = document.querySelector('marquee');
+	assert.notEqual(marquee, null);
+	assert.equal(marquee.hasAttribute('data-custom-marquee'), true);
+
+	// Renders Astro Code component
+	const pre = document.querySelector('pre');
+	assert.notEqual(pre, null);
+	assert.equal(pre.className, 'astro-code github-dark');
+
+	// Renders 2nd Astro Code component inside if tag
+	const pre2 = document.querySelectorAll('pre')[1];
+	assert.notEqual(pre2, null);
+	assert.equal(pre2.className, 'astro-code github-dark');
+}
+
+/** @param {string} html */
+function renderComponentsInsidePartialsChecks(html) {
+	const { document } = parseHTML(html);
+	// renders Counter.tsx
+	const button = document.querySelector('#counter');
+	assert.equal(button.textContent, '1');
+
+	// renders DeeplyNested.astro
+	const deeplyNested = document.querySelector('#deeply-nested');
+	assert.equal(deeplyNested.textContent, 'Deeply nested partial');
+}
diff --git a/packages/integrations/markdoc/test/render-extends-components.test.js b/packages/integrations/markdoc/test/render-extends-components.test.js
new file mode 100644
index 000000000..f5f1454c8
--- /dev/null
+++ b/packages/integrations/markdoc/test/render-extends-components.test.js
@@ -0,0 +1,69 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+const root = new URL('./fixtures/render-with-extends-components/', import.meta.url);
+
+describe('Markdoc - render components defined in `extends`', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root,
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('renders content - with components', async () => {
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderComponentsChecks(html);
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('renders content - with components', async () => {
+			const html = await fixture.readFile('/index.html');
+
+			renderComponentsChecks(html);
+		});
+	});
+});
+
+/** @param {string} html */
+function renderComponentsChecks(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	assert.equal(h2.textContent, 'Post with components');
+
+	// Renders custom shortcode component
+	const marquee = document.querySelector('marquee');
+	assert.notEqual(marquee, null);
+	assert.equal(marquee.hasAttribute('data-custom-marquee'), true);
+
+	// Renders Astro Code component
+	const pre = document.querySelector('pre');
+	assert.notEqual(pre, null);
+	assert.equal(pre.className, 'astro-code github-dark');
+
+	// Renders 2nd Astro Code component inside if tag
+	const pre2 = document.querySelectorAll('pre')[1];
+	assert.notEqual(pre2, null);
+	assert.equal(pre2.className, 'astro-code github-dark');
+}
diff --git a/packages/integrations/markdoc/test/render-html.test.js b/packages/integrations/markdoc/test/render-html.test.js
new file mode 100644
index 000000000..5bf7fe5ce
--- /dev/null
+++ b/packages/integrations/markdoc/test/render-html.test.js
@@ -0,0 +1,316 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+async function getFixture(name) {
+	return await loadFixture({
+		root: new URL(`./fixtures/${name}/`, import.meta.url),
+	});
+}
+
+describe('Markdoc - render html', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await getFixture('render-html');
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('renders content - simple', async () => {
+			const res = await fixture.fetch('/simple');
+			const html = await res.text();
+
+			renderSimpleChecks(html);
+		});
+
+		it('renders content - nested-html', async () => {
+			const res = await fixture.fetch('/nested-html');
+			const html = await res.text();
+
+			renderNestedHTMLChecks(html);
+		});
+
+		it('renders content - components interleaved with html', async () => {
+			const res = await fixture.fetch('/components');
+			const html = await res.text();
+
+			renderComponentsHTMLChecks(html);
+		});
+
+		it('renders content - randomly cased html attributes', async () => {
+			const res = await fixture.fetch('/randomly-cased-html-attributes');
+			const html = await res.text();
+
+			renderRandomlyCasedHTMLAttributesChecks(html);
+		});
+
+		it('renders content - html within partials', async () => {
+			const res = await fixture.fetch('/with-partial');
+			const html = await res.text();
+
+			renderHTMLWithinPartialChecks(html);
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('renders content - simple', async () => {
+			const html = await fixture.readFile('/simple/index.html');
+
+			renderSimpleChecks(html);
+		});
+
+		it('renders content - nested-html', async () => {
+			const html = await fixture.readFile('/nested-html/index.html');
+
+			renderNestedHTMLChecks(html);
+		});
+
+		it('renders content - components interleaved with html', async () => {
+			const html = await fixture.readFile('/components/index.html');
+
+			renderComponentsHTMLChecks(html);
+		});
+
+		it('renders content - randomly cased html attributes', async () => {
+			const html = await fixture.readFile('/randomly-cased-html-attributes/index.html');
+
+			renderRandomlyCasedHTMLAttributesChecks(html);
+		});
+
+		it('renders content - html within partials', async () => {
+			const html = await fixture.readFile('/with-partial/index.html');
+
+			renderHTMLWithinPartialChecks(html);
+		});
+	});
+});
+
+/** @param {string} html */
+function renderSimpleChecks(html) {
+	const { document } = parseHTML(html);
+
+	const h2 = document.querySelector('h2');
+	assert.equal(h2.textContent, 'Simple post header');
+
+	const spanInsideH2 = document.querySelector('h2 > span');
+	assert.equal(spanInsideH2.textContent, 'post');
+	assert.equal(spanInsideH2.className, 'inside-h2');
+	assert.equal(spanInsideH2.style.color, 'fuscia');
+
+	const p1 = document.querySelector('article > p:nth-of-type(1)');
+	assert.equal(p1.children.length, 1);
+	assert.equal(p1.textContent, 'This is a simple Markdoc post.');
+
+	const p2 = document.querySelector('article > p:nth-of-type(2)');
+	assert.equal(p2.children.length, 0);
+	assert.equal(p2.textContent, 'This is a paragraph!');
+
+	const p3 = document.querySelector('article > p:nth-of-type(3)');
+	assert.equal(p3.children.length, 1);
+	assert.equal(p3.textContent, 'This is a span inside a paragraph!');
+
+	const video = document.querySelector('video');
+	assert.ok(video, 'A video element should exist');
+	assert.ok(video.hasAttribute('autoplay'), 'The video element should have the autoplay attribute');
+	assert.ok(video.hasAttribute('muted'), 'The video element should have the muted attribute');
+}
+
+/** @param {string} html */
+function renderNestedHTMLChecks(html) {
+	const { document } = parseHTML(html);
+
+	const p1 = document.querySelector('p:nth-of-type(1)');
+	assert.equal(p1.id, 'p1');
+	assert.equal(p1.textContent, 'before inner after');
+	assert.equal(p1.children.length, 1);
+
+	const p1Span1 = p1.querySelector('span');
+	assert.equal(p1Span1.textContent, 'inner');
+	assert.equal(p1Span1.id, 'inner1');
+	assert.equal(p1Span1.className, 'inner-class');
+	assert.equal(p1Span1.style.color, 'hotpink');
+
+	const p2 = document.querySelector('p:nth-of-type(2)');
+	assert.equal(p2.id, 'p2');
+	assert.equal(p2.textContent, '\n  before\n  inner\n  after\n');
+	assert.equal(p2.children.length, 1);
+
+	const divL1 = document.querySelector('div:nth-of-type(1)');
+	assert.equal(divL1.id, 'div-l1');
+	assert.equal(divL1.children.length, 2);
+
+	const divL2_1 = divL1.querySelector('div:nth-of-type(1)');
+	assert.equal(divL2_1.id, 'div-l2-1');
+	assert.equal(divL2_1.children.length, 1);
+
+	const p3 = divL2_1.querySelector('p:nth-of-type(1)');
+	assert.equal(p3.id, 'p3');
+	assert.equal(p3.textContent, 'before inner after');
+	assert.equal(p3.children.length, 1);
+
+	const divL2_2 = divL1.querySelector('div:nth-of-type(2)');
+	assert.equal(divL2_2.id, 'div-l2-2');
+	assert.equal(divL2_2.children.length, 2);
+
+	const p4 = divL2_2.querySelector('p:nth-of-type(1)');
+	assert.equal(p4.id, 'p4');
+	assert.equal(p4.textContent, 'before inner after');
+	assert.equal(p4.children.length, 1);
+
+	const p5 = divL2_2.querySelector('p:nth-of-type(2)');
+	assert.equal(p5.id, 'p5');
+	assert.equal(p5.textContent, 'before inner after');
+	assert.equal(p5.children.length, 1);
+}
+
+/**
+ *
+ * @param {string} html */
+function renderRandomlyCasedHTMLAttributesChecks(html) {
+	const { document } = parseHTML(html);
+
+	const td1 = document.querySelector('#td1');
+	const td2 = document.querySelector('#td1');
+	const td3 = document.querySelector('#td1');
+	const td4 = document.querySelector('#td1');
+
+	// all four <td>'s which had randomly cased variants of colspan/rowspan should all be rendered lowercased at this point
+
+	assert.equal(td1.getAttribute('colspan'), '3');
+	assert.equal(td1.getAttribute('rowspan'), '2');
+
+	assert.equal(td2.getAttribute('colspan'), '3');
+	assert.equal(td2.getAttribute('rowspan'), '2');
+
+	assert.equal(td3.getAttribute('colspan'), '3');
+	assert.equal(td3.getAttribute('rowspan'), '2');
+
+	assert.equal(td4.getAttribute('colspan'), '3');
+	assert.equal(td4.getAttribute('rowspan'), '2');
+}
+
+/**
+ * @param {string} html
+ */
+function renderHTMLWithinPartialChecks(html) {
+	const { document } = parseHTML(html);
+
+	const li = document.querySelector('ul > li#partial');
+	assert.equal(li.textContent, 'List item');
+}
+
+/**
+ * Asserts that the rendered HTML tags with interleaved Markdoc tags (both block and inline) rendered in the expected nested graph of elements
+ *
+ * @param {string} html */
+function renderComponentsHTMLChecks(html) {
+	const { document } = parseHTML(html);
+
+	const naturalP1 = document.querySelector('article > p:nth-of-type(1)');
+	assert.equal(naturalP1.textContent, 'This is a inline mark in regular Markdown markup.');
+	assert.equal(naturalP1.children.length, 1);
+
+	const p1 = document.querySelector('article > p:nth-of-type(2)');
+	assert.equal(p1.id, 'p1');
+	assert.equal(p1.textContent, 'This is a inline mark under some HTML');
+	assert.equal(p1.children.length, 1);
+	assertInlineMark(p1.children[0]);
+
+	const div1p1 = document.querySelector('article > #div1 > p:nth-of-type(1)');
+	assert.equal(div1p1.id, 'div1-p1');
+	assert.equal(div1p1.textContent, 'This is a inline mark under some HTML');
+	assert.equal(div1p1.children.length, 1);
+	assertInlineMark(div1p1.children[0]);
+
+	const div1p2 = document.querySelector('article > #div1 > p:nth-of-type(2)');
+	assert.equal(div1p2.id, 'div1-p2');
+	assert.equal(div1p2.textContent, 'This is a inline mark under some HTML');
+	assert.equal(div1p2.children.length, 1);
+
+	const div1p2span1 = div1p2.querySelector('span');
+	assert.equal(div1p2span1.id, 'div1-p2-span1');
+	assert.equal(div1p2span1.textContent, 'inline mark');
+	assert.equal(div1p2span1.children.length, 1);
+	assertInlineMark(div1p2span1.children[0]);
+
+	const aside1 = document.querySelector('article > aside:nth-of-type(1)');
+	const aside1Title = aside1.querySelector('p.title');
+	assert.equal(aside1Title.textContent.trim(), 'Aside One');
+	const aside1Section = aside1.querySelector('section');
+	const aside1SectionP1 = aside1Section.querySelector('p:nth-of-type(1)');
+	assert.equal(
+		aside1SectionP1.textContent,
+		"I'm a Markdown paragraph inside an top-level aside tag",
+	);
+	const aside1H2_1 = aside1Section.querySelector('h2:nth-of-type(1)');
+	assert.equal(aside1H2_1.id, 'im-an-h2-via-markdown-markup'); // automatic slug
+	assert.equal(aside1H2_1.textContent, "I'm an H2 via Markdown markup");
+	const aside1H2_2 = aside1Section.querySelector('h2:nth-of-type(2)');
+	assert.equal(aside1H2_2.id, 'h-two');
+	assert.equal(aside1H2_2.textContent, "I'm an H2 via HTML markup");
+	const aside1SectionP2 = aside1Section.querySelector('p:nth-of-type(2)');
+	assert.equal(aside1SectionP2.textContent, 'Markdown bold vs HTML bold');
+	assert.equal(aside1SectionP2.children.length, 2);
+	const aside1SectionP2Strong1 = aside1SectionP2.querySelector('strong:nth-of-type(1)');
+	assert.equal(aside1SectionP2Strong1.textContent, 'Markdown bold');
+	const aside1SectionP2Strong2 = aside1SectionP2.querySelector('strong:nth-of-type(2)');
+	assert.equal(aside1SectionP2Strong2.textContent, 'HTML bold');
+
+	const article = document.querySelector('article');
+	assert.equal(article.textContent.includes('RENDERED'), true);
+	assert.notEqual(article.textContent.includes('NOT RENDERED'), true);
+
+	const section1 = document.querySelector('article > #section1');
+	const section1div1 = section1.querySelector('#div1');
+	const section1Aside1 = section1div1.querySelector('aside:nth-of-type(1)');
+	const section1Aside1Title = section1Aside1.querySelector('p.title');
+	assert.equal(section1Aside1Title.textContent.trim(), 'Nested un-indented Aside');
+	const section1Aside1Section = section1Aside1.querySelector('section');
+	const section1Aside1SectionP1 = section1Aside1Section.querySelector('p:nth-of-type(1)');
+	assert.equal(section1Aside1SectionP1.textContent, 'regular Markdown markup');
+	const section1Aside1SectionP4 = section1Aside1Section.querySelector('p:nth-of-type(2)');
+	assert.equal(section1Aside1SectionP4.textContent, 'nested inline mark content');
+	assert.equal(section1Aside1SectionP4.children.length, 1);
+	assertInlineMark(section1Aside1SectionP4.children[0]);
+
+	const section1div2 = section1.querySelector('#div2');
+	const section1Aside2 = section1div2.querySelector('aside:nth-of-type(1)');
+	const section1Aside2Title = section1Aside2.querySelector('p.title');
+	assert.equal(section1Aside2Title.textContent.trim(), 'Nested indented Aside 💀');
+	const section1Aside2Section = section1Aside2.querySelector('section');
+	const section1Aside2SectionP1 = section1Aside2Section.querySelector('p:nth-of-type(1)');
+	assert.equal(section1Aside2SectionP1.textContent, 'regular Markdown markup');
+	const section1Aside1SectionP5 = section1Aside2Section.querySelector('p:nth-of-type(2)');
+	assert.equal(section1Aside1SectionP5.id, 'p5');
+	assert.equal(section1Aside1SectionP5.children.length, 1);
+	const section1Aside1SectionP5Span1 = section1Aside1SectionP5.children[0];
+	assert.equal(section1Aside1SectionP5Span1.textContent, 'inline mark');
+	assert.equal(section1Aside1SectionP5Span1.children.length, 1);
+	const section1Aside1SectionP5Span1Span1 = section1Aside1SectionP5Span1.children[0];
+	assert.equal(section1Aside1SectionP5Span1Span1.textContent, ' mark');
+}
+
+/** @param {HTMLElement | null | undefined} el */
+
+function assertInlineMark(el) {
+	assert.ok(el);
+	assert.equal(el.children.length, 0);
+	assert.equal(el.textContent, 'inline mark');
+	assert.equal(el.className, 'mark');
+	assert.equal(el.style.color, 'hotpink');
+}
diff --git a/packages/integrations/markdoc/test/render-indented-components.test.js b/packages/integrations/markdoc/test/render-indented-components.test.js
new file mode 100644
index 000000000..ac47e72f9
--- /dev/null
+++ b/packages/integrations/markdoc/test/render-indented-components.test.js
@@ -0,0 +1,67 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+const root = new URL('./fixtures/render-with-indented-components/', import.meta.url);
+
+describe('Markdoc - render indented components', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root,
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('renders content - with indented components', async () => {
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderIndentedComponentsChecks(html);
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('renders content - with indented components', async () => {
+			const html = await fixture.readFile('/index.html');
+
+			renderIndentedComponentsChecks(html);
+		});
+	});
+});
+
+/** @param {string} html */
+function renderIndentedComponentsChecks(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	assert.equal(h2.textContent, 'Post with indented components');
+
+	// Renders custom shortcode components
+	const marquees = document.querySelectorAll('marquee');
+	assert.equal(marquees.length, 2);
+
+	// Renders h3
+	const h3 = document.querySelector('h3');
+	assert.equal(h3.textContent, 'I am an h3!');
+
+	// Renders Astro Code component
+	const pre = document.querySelector('pre');
+	assert.notEqual(pre, null);
+	assert.equal(pre.className, 'astro-code github-dark');
+}
diff --git a/packages/integrations/markdoc/test/render.test.js b/packages/integrations/markdoc/test/render.test.js
new file mode 100644
index 000000000..4c9293288
--- /dev/null
+++ b/packages/integrations/markdoc/test/render.test.js
@@ -0,0 +1,199 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+async function getFixture(name) {
+	return await loadFixture({
+		root: new URL(`./fixtures/${name}/`, import.meta.url),
+	});
+}
+
+describe('Markdoc - render', () => {
+	describe('dev', () => {
+		it('renders content - simple', async () => {
+			const fixture = await getFixture('render-simple');
+			const server = await fixture.startDevServer();
+
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderSimpleChecks(html);
+
+			await server.stop();
+		});
+
+		it('renders content - with partials', async () => {
+			const fixture = await getFixture('render-partials');
+			const server = await fixture.startDevServer();
+
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderPartialsChecks(html);
+
+			await server.stop();
+		});
+
+		it('renders content - with config', async () => {
+			const fixture = await getFixture('render-with-config');
+			const server = await fixture.startDevServer();
+
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderConfigChecks(html);
+
+			await server.stop();
+		});
+
+		it('renders content - with `render: null` in document', async () => {
+			const fixture = await getFixture('render-null');
+			const server = await fixture.startDevServer();
+
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderNullChecks(html);
+
+			await server.stop();
+		});
+
+		it('renders content - with root folder containing space', async () => {
+			const fixture = await getFixture('render with-space');
+			const server = await fixture.startDevServer();
+
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderWithRootFolderContainingSpace(html);
+
+			await server.stop();
+		});
+	});
+
+	describe('build', () => {
+		it('renders content - simple', async () => {
+			const fixture = await getFixture('render-simple');
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+
+			renderSimpleChecks(html);
+		});
+
+		it('renders content - with partials', async () => {
+			const fixture = await getFixture('render-partials');
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+
+			renderPartialsChecks(html);
+		});
+
+		it('renders content - with config', async () => {
+			const fixture = await getFixture('render-with-config');
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+
+			renderConfigChecks(html);
+		});
+
+		it('renders content - with `render: null` in document', async () => {
+			const fixture = await getFixture('render-null');
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+
+			renderNullChecks(html);
+		});
+
+		it('renders content - with root folder containing space', async () => {
+			const fixture = await getFixture('render with-space');
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+
+			renderWithRootFolderContainingSpace(html);
+		});
+
+		it('renders content - with typographer option', async () => {
+			const fixture = await getFixture('render-typographer');
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+
+			renderTypographerChecks(html);
+		});
+	});
+});
+
+/**
+ * @param {string} html
+ */
+function renderNullChecks(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	assert.equal(h2.textContent, 'Post with render null');
+	assert.equal(h2.parentElement?.tagName, 'BODY');
+	const divWrapper = document.querySelector('.div-wrapper');
+	assert.equal(divWrapper.textContent, "I'm inside a div wrapper");
+}
+
+/** @param {string} html */
+function renderPartialsChecks(html) {
+	const { document } = parseHTML(html);
+	const top = document.querySelector('#top');
+	assert.ok(top);
+	const nested = document.querySelector('#nested');
+	assert.ok(nested);
+	const configured = document.querySelector('#configured');
+	assert.ok(configured);
+}
+
+/** @param {string} html */
+function renderConfigChecks(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	assert.equal(h2.textContent, 'Post with config');
+	const textContent = html;
+
+	assert.notEqual(textContent.includes('Hello'), true);
+	assert.equal(textContent.includes('Hola'), true);
+	assert.equal(textContent.includes('Konnichiwa'), true);
+
+	const runtimeVariable = document.querySelector('#runtime-variable');
+	assert.equal(runtimeVariable?.textContent?.trim(), 'working!');
+}
+
+/** @param {string} html */
+function renderSimpleChecks(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	assert.equal(h2.textContent, 'Simple post');
+	const p = document.querySelector('p');
+	assert.equal(p.textContent, 'This is a simple Markdoc post.');
+}
+
+/** @param {string} html */
+function renderWithRootFolderContainingSpace(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	assert.equal(h2.textContent, 'Simple post with root folder containing a space');
+	const p = document.querySelector('p');
+	assert.equal(p.textContent, 'This is a simple Markdoc post with root folder containing a space.');
+}
+
+/**
+ * @param {string} html
+ */
+function renderTypographerChecks(html) {
+	const { document } = parseHTML(html);
+
+	const h2 = document.querySelector('h2');
+	assert.equal(h2.textContent, 'Typographer’s post');
+
+	const p = document.querySelector('p');
+	assert.equal(p.textContent, 'This is a post to test the “typographer” option.');
+}
diff --git a/packages/integrations/markdoc/test/syntax-highlighting.test.js b/packages/integrations/markdoc/test/syntax-highlighting.test.js
new file mode 100644
index 000000000..6ea841ae1
--- /dev/null
+++ b/packages/integrations/markdoc/test/syntax-highlighting.test.js
@@ -0,0 +1,136 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import Markdoc from '@markdoc/markdoc';
+import { isHTMLString } from 'astro/runtime/server/index.js';
+import { parseHTML } from 'linkedom';
+import prism from '../dist/extensions/prism.js';
+import shiki from '../dist/extensions/shiki.js';
+import { setupConfig } from '../dist/runtime.js';
+
+const entry = `
+\`\`\`ts
+const highlighting = true;
+\`\`\`
+
+\`\`\`css
+.highlighting {
+	color: red;
+}
+\`\`\`
+`;
+
+describe('Markdoc - syntax highlighting', () => {
+	describe('shiki', () => {
+		it('transforms with defaults', async () => {
+			const ast = Markdoc.parse(entry);
+			const content = await Markdoc.transform(ast, await getConfigExtendingShiki());
+
+			assert.equal(content.children.length, 2);
+			for (const codeBlock of content.children) {
+				assert.equal(isHTMLString(codeBlock), true);
+
+				const pre = parsePreTag(codeBlock);
+				assert.equal(pre.classList.contains('astro-code'), true);
+				assert.equal(pre.classList.contains('github-dark'), true);
+			}
+		});
+		it('transforms with `theme` property', async () => {
+			const ast = Markdoc.parse(entry);
+			const content = await Markdoc.transform(
+				ast,
+				await getConfigExtendingShiki({
+					theme: 'dracula',
+				}),
+			);
+			assert.equal(content.children.length, 2);
+			for (const codeBlock of content.children) {
+				assert.equal(isHTMLString(codeBlock), true);
+
+				const pre = parsePreTag(codeBlock);
+				assert.equal(pre.classList.contains('astro-code'), true);
+				assert.equal(pre.classList.contains('dracula'), true);
+			}
+		});
+		it('transforms with `wrap` property', async () => {
+			const ast = Markdoc.parse(entry);
+			const content = await Markdoc.transform(
+				ast,
+				await getConfigExtendingShiki({
+					wrap: true,
+				}),
+			);
+			assert.equal(content.children.length, 2);
+			for (const codeBlock of content.children) {
+				assert.equal(isHTMLString(codeBlock), true);
+
+				const pre = parsePreTag(codeBlock);
+				assert.equal(pre.getAttribute('style').includes('white-space: pre-wrap'), true);
+				assert.equal(pre.getAttribute('style').includes('word-wrap: break-word'), true);
+			}
+		});
+		it('transform within if tags', async () => {
+			const ast = Markdoc.parse(`
+{% if equals("true", "true") %}
+Inside truthy
+
+\`\`\`js
+const hello = "yes";
+\`\`\`
+
+{% /if %}`);
+			const content = await Markdoc.transform(ast, await getConfigExtendingShiki());
+			assert.equal(content.children.length, 1);
+			assert.equal(content.children[0].length, 2);
+			const pTag = content.children[0][0];
+			assert.equal(pTag.name, 'p');
+			const codeBlock = content.children[0][1];
+			assert.equal(isHTMLString(codeBlock), true);
+			const pre = parsePreTag(codeBlock);
+			assert.equal(pre.classList.contains('astro-code'), true);
+			assert.equal(pre.classList.contains('github-dark'), true);
+		});
+	});
+
+	describe('prism', () => {
+		it('transforms', async () => {
+			const ast = Markdoc.parse(entry);
+			const config = await setupConfig({
+				extends: [prism()],
+			});
+			const content = await Markdoc.transform(ast, config);
+
+			assert.equal(content.children.length, 2);
+			const [tsBlock, cssBlock] = content.children;
+
+			assert.equal(isHTMLString(tsBlock), true);
+			assert.equal(isHTMLString(cssBlock), true);
+
+			const preTs = parsePreTag(tsBlock);
+			assert.equal(preTs.classList.contains('language-ts'), true);
+
+			const preCss = parsePreTag(cssBlock);
+			assert.equal(preCss.classList.contains('language-css'), true);
+		});
+	});
+});
+
+/**
+ * @param {import('astro').ShikiConfig} config
+ * @returns {import('../src/config.js').AstroMarkdocConfig}
+ */
+async function getConfigExtendingShiki(config) {
+	return await setupConfig({
+		extends: [shiki(config)],
+	});
+}
+
+/**
+ * @param {string} html
+ * @returns {HTMLPreElement}
+ */
+function parsePreTag(html) {
+	const { document } = parseHTML(html);
+	const pre = document.querySelector('pre');
+	assert.ok(pre);
+	return pre;
+}
diff --git a/packages/integrations/markdoc/test/variables.test.js b/packages/integrations/markdoc/test/variables.test.js
new file mode 100644
index 000000000..9873afcb7
--- /dev/null
+++ b/packages/integrations/markdoc/test/variables.test.js
@@ -0,0 +1,55 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+import markdoc from '../dist/index.js';
+
+const root = new URL('./fixtures/variables/', import.meta.url);
+
+describe('Markdoc - Variables', () => {
+	let baseFixture;
+
+	before(async () => {
+		baseFixture = await loadFixture({
+			root,
+			integrations: [markdoc()],
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await baseFixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('has expected entry properties', async () => {
+			const res = await baseFixture.fetch('/');
+			const html = await res.text();
+			const { document } = parseHTML(html);
+			assert.equal(document.querySelector('h1')?.textContent, 'Processed by schema: Test entry');
+			assert.equal(document.getElementById('id')?.textContent?.trim(), 'id: entry.mdoc');
+			assert.equal(document.getElementById('slug')?.textContent?.trim(), 'slug: entry');
+			assert.equal(document.getElementById('collection')?.textContent?.trim(), 'collection: blog');
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await baseFixture.build();
+		});
+
+		it('has expected entry properties', async () => {
+			const html = await baseFixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+			assert.equal(document.querySelector('h1')?.textContent, 'Processed by schema: Test entry');
+			assert.equal(document.getElementById('id')?.textContent?.trim(), 'id: entry.mdoc');
+			assert.equal(document.getElementById('slug')?.textContent?.trim(), 'slug: entry');
+			assert.equal(document.getElementById('collection')?.textContent?.trim(), 'collection: blog');
+		});
+	});
+});