diff --git a/.changeset/calm-socks-shake.md b/.changeset/calm-socks-shake.md
new file mode 100644
index 000000000000..79f462d2902b
--- /dev/null
+++ b/.changeset/calm-socks-shake.md
@@ -0,0 +1,6 @@
+---
+"@astrojs/markdown-remark": minor
+"astro": minor
+---
+
+Allows remark plugins to pass options specifying how images in `.md` files will be optimized
diff --git a/.changeset/itchy-clouds-invite.md b/.changeset/itchy-clouds-invite.md
new file mode 100644
index 000000000000..67dc73f0864f
--- /dev/null
+++ b/.changeset/itchy-clouds-invite.md
@@ -0,0 +1,16 @@
+---
+"astro": minor
+---
+
+Removes the requirement for non-content files and assets inside content collections to be prefixed with an underscore. For files with extensions like `.astro` or `.css`, you can now remove underscores without seeing a warning in the terminal.
+
+```diff
+src/content/blog/
+post.mdx
+- _styles.css
+- _Component.astro
++ styles.css
++ Component.astro
+```
+
+Continue to use underscores in your content collections to exclude individual content files, such as drafts, from the build output.
diff --git a/.changeset/polite-dogs-join.md b/.changeset/polite-dogs-join.md
new file mode 100644
index 000000000000..3bb0128d620f
--- /dev/null
+++ b/.changeset/polite-dogs-join.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/markdoc": patch
+---
+
+Removes unnecessary `shikiji` dependency
diff --git a/.changeset/six-scissors-worry.md b/.changeset/six-scissors-worry.md
new file mode 100644
index 000000000000..ebba0da66d63
--- /dev/null
+++ b/.changeset/six-scissors-worry.md
@@ -0,0 +1,8 @@
+---
+"@astrojs/markdown-remark": minor
+"astro": minor
+---
+
+Adds a new `markdown.shikiConfig.transformers` config option. You can use this option to transform the Shikiji hast (AST format of the generated HTML) to customize the final HTML. Also updates Shikiji to the latest stable version.
+
+See [Shikiji's documentation](https://shikiji.netlify.app/guide/transformers) for more details about creating your own custom transformers, and [a list of common transformers](https://shikiji.netlify.app/packages/transformers) you can add directly to your project.
diff --git a/.changeset/sixty-dogs-sneeze.md b/.changeset/sixty-dogs-sneeze.md
new file mode 100644
index 000000000000..13f89232898d
--- /dev/null
+++ b/.changeset/sixty-dogs-sneeze.md
@@ -0,0 +1,24 @@
+---
+"astro": minor
+---
+
+Adds an experimental flag `clientPrerender` to prerender your prefetched pages on the client with the [Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API).
+
+```js
+// astro.config.mjs
+{
+  prefetch: {
+    prefetchAll: true,
+    defaultStrategy: 'viewport',
+  },
+  experimental: {
+    clientPrerender: true,
+  },
+}
+```
+
+Enabling this feature overrides the default `prefetch` behavior globally to prerender links on the client according to your `prefetch` configuration. Instead of appending a `<link>` tag to the head of the document or fetching the page with JavaScript, a `<script>` tag will be appended with the corresponding speculation rules.
+
+Client side prerendering requires browser support. If the Speculation Rules API is not supported, `prefetch` will fallback to the supported strategy.
+
+See the [Prefetch Guide](https://docs.astro.build/en/guides/prefetch/) for more `prefetch` options and usage.
\ No newline at end of file
diff --git a/packages/astro/e2e/prefetch.test.js b/packages/astro/e2e/prefetch.test.js
index 12aa770029c2..72713a0fc67a 100644
--- a/packages/astro/e2e/prefetch.test.js
+++ b/packages/astro/e2e/prefetch.test.js
@@ -284,3 +284,106 @@ test.describe("Prefetch (prefetchAll: true, defaultStrategy: 'load')", () => {
 		expect(page.locator('link[rel="prefetch"][href$="/prefetch-load"]')).toBeDefined();
 	});
 });
+
+// Playwrights `request` event does not appear to fire when using the speculation rules API
+// Instead of checking for the added url, each test checks to see if `document.head`
+// contains a `script[type=speculationrules]` that has the `url` in it.
+test.describe('Prefetch (default), Experimental ({ clientPrerender: true })', () => {
+	/**
+	 * @param {import('@playwright/test').Page} page
+	 * @param {string} url
+	 * @returns the number of script[type=speculationrules] that have the url
+	 */
+	async function scriptIsInHead(page, url) {
+		return await page.evaluate((testUrl) => {
+			const scripts = document.head.querySelectorAll('script[type="speculationrules"]');
+			let count = 0;
+			for (const script of scripts) {
+				/** @type {{ prerender: { urls: string[] }[] }} */
+				const speculationRules = JSON.parse(script.textContent);
+				const specUrl = speculationRules.prerender.at(0).urls.at(0);
+				const indexOf = specUrl.indexOf(testUrl);
+				if (indexOf > -1) count++;
+			}
+			return count;
+		}, url);
+	}
+
+	let devServer;
+
+	test.beforeAll(async ({ astro }) => {
+		devServer = await astro.startDevServer({
+			experimental: {
+				clientPrerender: true,
+			},
+		});
+	});
+
+	test.afterAll(async () => {
+		await devServer.stop();
+	});
+
+	test('Link without data-astro-prefetch should not prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(await scriptIsInHead(page, '/prefetch-default')).toBeFalsy();
+	});
+
+	test('data-astro-prefetch="false" should not prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(await scriptIsInHead(page, '/prefetch-false')).toBeFalsy();
+	});
+
+	test('Link with search param should prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(await scriptIsInHead(page, '?search-param=true')).toBeFalsy();
+		await page.locator('#prefetch-search-param').hover();
+		await page.waitForFunction(
+			() => document.querySelectorAll('script[type=speculationrules]').length === 2
+		);
+		expect(await scriptIsInHead(page, '?search-param=true')).toBeTruthy();
+	});
+
+	test('data-astro-prefetch="tap" should prefetch on tap', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(await scriptIsInHead(page, '/prefetch-tap')).toBeFalsy();
+		await page.locator('#prefetch-tap').dragTo(page.locator('#prefetch-hover'));
+		expect(await scriptIsInHead(page, '/prefetch-tap')).toBeTruthy();
+	});
+
+	test('data-astro-prefetch="hover" should prefetch on hover', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(await scriptIsInHead(page, '/prefetch-hover')).toBeFalsy();
+		await page.locator('#prefetch-hover').hover();
+		await page.waitForFunction(
+			() => document.querySelectorAll('script[type=speculationrules]').length === 2
+		);
+		expect(await scriptIsInHead(page, '/prefetch-hover')).toBeTruthy();
+	});
+
+	test('data-astro-prefetch="viewport" should prefetch on viewport', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(await scriptIsInHead(page, '/prefetch-viewport')).toBeFalsy();
+		// Scroll down to show the element
+		await page.locator('#prefetch-viewport').scrollIntoViewIfNeeded();
+		await page.waitForFunction(
+			() => document.querySelectorAll('script[type=speculationrules]').length === 2
+		);
+		expect(await scriptIsInHead(page, '/prefetch-viewport')).toBeTruthy();
+	});
+
+	test('manual prefetch() works once', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(await scriptIsInHead(page, '/prefetch-manual')).toEqual(0);
+		await page.locator('#prefetch-manual').click();
+		expect(await scriptIsInHead(page, '/prefetch-manual')).toEqual(1);
+
+		// prefetch again should have no effect
+		await page.locator('#prefetch-manual').click();
+		expect(await scriptIsInHead(page, '/prefetch-manual')).toEqual(1);
+	});
+
+	test('data-astro-prefetch="load" should prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(await scriptIsInHead(page, 'prefetch-load')).toBeTruthy();
+	});
+});
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 7ca4923678c2..e1743f8f6421 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -166,7 +166,7 @@
     "resolve": "^1.22.4",
     "semver": "^7.5.4",
     "server-destroy": "^1.0.1",
-    "shikiji": "^0.6.13",
+    "shikiji": "^0.9.18",
     "string-width": "^7.0.0",
     "strip-ansi": "^7.1.0",
     "tsconfck": "^3.0.0",
@@ -224,6 +224,7 @@
     "remark-code-titles": "^0.1.2",
     "rollup": "^4.5.0",
     "sass": "^1.69.5",
+    "shikiji-core": "^0.9.18",
     "srcset-parse": "^1.1.0",
     "unified": "^11.0.4"
   },
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
index fca4790491d1..8de67fdae0bf 100644
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@@ -1595,6 +1595,42 @@ export interface AstroUserConfig {
 		 * ```
 		 */
 		contentCollectionCache?: boolean;
+
+		/**
+		 * @docs
+		 * @name experimental.clientPrerender
+		 * @type {boolean}
+		 * @default `false`
+		 * @version: 4.2.0
+		 * @description
+		 * Enables pre-rendering your prefetched pages on the client in supported browsers.
+		 *
+		 * This feature uses the experimental [Speculation Rules Web API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) and overrides the default `prefetch` behavior globally to prerender links on the client.
+		 * You may wish to review the [possible risks when prerendering on the client](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API#unsafe_prefetching) before enabling this feature.
+		 *
+		 * Enable client side prerendering in your `astro.config.mjs` along with any desired `prefetch` configuration options:
+		 *
+		 * ```js
+		 * // astro.config.mjs
+		 * {
+		 *   prefetch: {
+		 *     prefetchAll: true,
+		 *     defaultStrategy: 'viewport',
+		 *   },
+		 * 	experimental: {
+		 * 		clientPrerender: true,
+		 * 	},
+		 * }
+		 * ```
+		 *
+		 * Continue to use the `data-astro-prefetch` attribute on any `<a />` link on your site to opt in to prefetching.
+		 * Instead of appending a `<link>` tag to the head of the document or fetching the page with JavaScript, a `<script>` tag will be appended with the corresponding speculation rules.
+		 *
+		 * Client side prerendering requires browser support. If the Speculation Rules API is not supported, `prefetch` will fallback to the supported strategy.
+		 *
+		 * See the [Prefetch Guide](https://docs.astro.build/en/guides/prefetch/) for more `prefetch` options and usage.
+		 */
+		clientPrerender?: boolean;
 	};
 }
 
diff --git a/packages/astro/src/content/types-generator.ts b/packages/astro/src/content/types-generator.ts
index 82300f9c77bb..4d466f594223 100644
--- a/packages/astro/src/content/types-generator.ts
+++ b/packages/astro/src/content/types-generator.ts
@@ -56,8 +56,6 @@ type CreateContentGeneratorParams = {
 	fs: typeof fsMod;
 };
 
-class UnsupportedFileTypeError extends Error {}
-
 export async function createContentTypesGenerator({
 	contentConfigObserver,
 	fs,
@@ -109,9 +107,7 @@ export async function createContentTypesGenerator({
 		return { typesGenerated: true };
 	}
 
-	async function handleEvent(
-		event: ContentEvent
-	): Promise<{ shouldGenerateTypes: boolean; error?: Error }> {
+	async function handleEvent(event: ContentEvent): Promise<{ shouldGenerateTypes: boolean }> {
 		if (event.name === 'addDir' || event.name === 'unlinkDir') {
 			const collection = normalizePath(
 				path.relative(fileURLToPath(contentPaths.contentDir), fileURLToPath(event.entry))
@@ -147,21 +143,6 @@ export async function createContentTypesGenerator({
 			await reloadContentConfigObserver({ fs, settings, viteServer });
 			return { shouldGenerateTypes: true };
 		}
-		if (fileType === 'unsupported') {
-			// Avoid warning if file was deleted.
-			if (event.name === 'unlink') {
-				return { shouldGenerateTypes: false };
-			}
-			const { id } = getContentEntryIdAndSlug({
-				entry: event.entry,
-				contentDir: contentPaths.contentDir,
-				collection: '',
-			});
-			return {
-				shouldGenerateTypes: false,
-				error: new UnsupportedFileTypeError(id),
-			};
-		}
 
 		const { entry } = event;
 		const { contentDir } = contentPaths;
@@ -319,16 +300,6 @@ export async function createContentTypesGenerator({
 		}
 
 		events = [];
-		for (const response of eventResponses) {
-			if (response.error instanceof UnsupportedFileTypeError) {
-				logger.warn(
-					'content',
-					`Unsupported file type ${bold(
-						response.error.message
-					)} found. Prefix filename with an underscore (\`_\`) to ignore.`
-				);
-			}
-		}
 		const observable = contentConfigObserver.get();
 		if (eventResponses.some((r) => r.shouldGenerateTypes)) {
 			await writeContentFiles({
diff --git a/packages/astro/src/content/utils.ts b/packages/astro/src/content/utils.ts
index f6f3dae1cafa..3515a43c7216 100644
--- a/packages/astro/src/content/utils.ts
+++ b/packages/astro/src/content/utils.ts
@@ -11,9 +11,7 @@ import type {
 	AstroSettings,
 	ContentEntryType,
 	DataEntryType,
-	ImageInputFormat,
 } from '../@types/astro.js';
-import { VALID_INPUT_FORMATS } from '../assets/consts.js';
 import { AstroError, AstroErrorData } from '../core/errors/index.js';
 
 import { formatYAMLException, isYAMLException } from '../core/errors/utils.js';
@@ -247,15 +245,11 @@ export function getEntryType(
 	paths: Pick<ContentPaths, 'config' | 'contentDir'>,
 	contentFileExts: string[],
 	dataFileExts: string[]
-): 'content' | 'data' | 'config' | 'ignored' | 'unsupported' {
-	const { ext, base } = path.parse(entryPath);
+): 'content' | 'data' | 'config' | 'ignored' {
+	const { ext } = path.parse(entryPath);
 	const fileUrl = pathToFileURL(entryPath);
 
-	if (
-		hasUnderscoreBelowContentDirectoryPath(fileUrl, paths.contentDir) ||
-		isOnIgnoreList(base) ||
-		isImageAsset(ext)
-	) {
+	if (hasUnderscoreBelowContentDirectoryPath(fileUrl, paths.contentDir)) {
 		return 'ignored';
 	} else if (contentFileExts.includes(ext)) {
 		return 'content';
@@ -264,21 +258,10 @@ export function getEntryType(
 	} else if (fileUrl.href === paths.config.url.href) {
 		return 'config';
 	} else {
-		return 'unsupported';
+		return 'ignored';
 	}
 }
 
-function isOnIgnoreList(fileName: string) {
-	return ['.DS_Store'].includes(fileName);
-}
-
-/**
- * Return if a file extension is a valid image asset, so we can avoid outputting a warning for them.
- */
-function isImageAsset(fileExt: string) {
-	return VALID_INPUT_FORMATS.includes(fileExt.slice(1) as ImageInputFormat);
-}
-
 export function hasUnderscoreBelowContentDirectoryPath(
 	fileUrl: URL,
 	contentDir: ContentPaths['contentDir']
diff --git a/packages/astro/src/core/app/index.ts b/packages/astro/src/core/app/index.ts
index 0340a19f3801..ad207d129054 100644
--- a/packages/astro/src/core/app/index.ts
+++ b/packages/astro/src/core/app/index.ts
@@ -42,18 +42,18 @@ const REROUTABLE_STATUS_CODES = new Set([404, 500]);
 export interface RenderOptions {
 	/**
 	 * Whether to automatically add all cookies written by `Astro.cookie.set()` to the response headers.
-	 * 
+	 *
 	 * When set to `true`, they will be added to the `Set-Cookie` header as comma-separated key=value pairs. You can use the standard `response.headers.getSetCookie()` API to read them individually.
-	 * 
+	 *
 	 * When set to `false`, the cookies will only be available from `App.getSetCookieFromResponse(response)`.
-	 * 
+	 *
 	 * @default {false}
 	 */
 	addCookieHeader?: boolean;
 
 	/**
 	 * The client IP address that will be made available as `Astro.clientAddress` in pages, and as `ctx.clientAddress` in API routes and middleware.
-	 * 
+	 *
 	 * Default: `request[Symbol.for("astro.clientAddress")]`
 	 */
 	clientAddress?: string;
@@ -65,7 +65,7 @@ export interface RenderOptions {
 
 	/**
 	 * **Advanced API**: you probably do not need to use this.
-	 * 
+	 *
 	 * Default: `app.match(request)`
 	 */
 	routeData?: RouteData;
@@ -196,12 +196,10 @@ export class App {
 
 		if (
 			routeDataOrOptions &&
-			(
-				'addCookieHeader' in routeDataOrOptions ||
+			('addCookieHeader' in routeDataOrOptions ||
 				'clientAddress' in routeDataOrOptions ||
 				'locals' in routeDataOrOptions ||
-				'routeData' in routeDataOrOptions
-			)
+				'routeData' in routeDataOrOptions)
 		) {
 			if ('addCookieHeader' in routeDataOrOptions) {
 				addCookieHeader = routeDataOrOptions.addCookieHeader;
@@ -226,7 +224,7 @@ export class App {
 			Reflect.set(request, localsSymbol, locals);
 		}
 		if (clientAddress) {
-			Reflect.set(request, clientAddressSymbol, clientAddress)
+			Reflect.set(request, clientAddressSymbol, clientAddress);
 		}
 		// Handle requests with duplicate slashes gracefully by cloning with a cleaned-up request URL
 		if (request.url !== collapseDuplicateSlashes(request.url)) {
@@ -323,7 +321,7 @@ export class App {
 	 * @param response The response to read cookies from.
 	 * @returns An iterator that yields key-value pairs as equal-sign-separated strings.
 	 */
-	static getSetCookieFromResponse = getSetCookiesFromResponse
+	static getSetCookieFromResponse = getSetCookiesFromResponse;
 
 	/**
 	 * Creates the render context of the current route
diff --git a/packages/astro/src/core/app/node.ts b/packages/astro/src/core/app/node.ts
index aa777db8831c..c71aaafcecaa 100644
--- a/packages/astro/src/core/app/node.ts
+++ b/packages/astro/src/core/app/node.ts
@@ -33,11 +33,7 @@ export class NodeApp extends App {
 	 * @deprecated Instead of passing `RouteData` and locals individually, pass an object with `routeData` and `locals` properties.
 	 * See https://github.com/withastro/astro/pull/9199 for more information.
 	 */
-	render(
-		request: NodeRequest | Request,
-		routeData?: RouteData,
-		locals?: object
-	): Promise<Response>;
+	render(request: NodeRequest | Request, routeData?: RouteData, locals?: object): Promise<Response>;
 	render(
 		req: NodeRequest | Request,
 		routeDataOrOptions?: RouteData | RenderOptions,
@@ -55,26 +51,24 @@ export class NodeApp extends App {
 	 * ```js
 	 * import { NodeApp } from 'astro/app/node';
 	 * import { createServer } from 'node:http';
-	 * 
+	 *
 	 * const server = createServer(async (req, res) => {
-     *     const request = NodeApp.createRequest(req);
-     *     const response = await app.render(request);
-     *     await NodeApp.writeResponse(response, res);
+	 *     const request = NodeApp.createRequest(req);
+	 *     const response = await app.render(request);
+	 *     await NodeApp.writeResponse(response, res);
 	 * })
 	 * ```
 	 */
-	static createRequest(
-		req: NodeRequest,
-		{ skipBody = false } = {}
-	): Request {
-		const protocol = req.headers['x-forwarded-proto'] ??
+	static createRequest(req: NodeRequest, { skipBody = false } = {}): Request {
+		const protocol =
+			req.headers['x-forwarded-proto'] ??
 			('encrypted' in req.socket && req.socket.encrypted ? 'https' : 'http');
 		const hostname = req.headers.host || req.headers[':authority'];
 		const url = `${protocol}://${hostname}${req.url}`;
 		const options: RequestInit = {
 			method: req.method || 'GET',
 			headers: makeRequestHeaders(req),
-		}
+		};
 		const bodyAllowed = options.method !== 'HEAD' && options.method !== 'GET' && skipBody === false;
 		if (bodyAllowed) {
 			Object.assign(options, makeRequestBody(req));
@@ -91,14 +85,14 @@ export class NodeApp extends App {
 	 * ```js
 	 * import { NodeApp } from 'astro/app/node';
 	 * import { createServer } from 'node:http';
-	 * 
+	 *
 	 * const server = createServer(async (req, res) => {
-     *     const request = NodeApp.createRequest(req);
-     *     const response = await app.render(request);
-     *     await NodeApp.writeResponse(response, res);
+	 *     const request = NodeApp.createRequest(req);
+	 *     const response = await app.render(request);
+	 *     await NodeApp.writeResponse(response, res);
 	 * })
 	 * ```
-	 * @param source WhatWG Response 
+	 * @param source WhatWG Response
 	 * @param destination NodeJS ServerResponse
 	 */
 	static async writeResponse(source: Response, destination: ServerResponse) {
@@ -111,8 +105,11 @@ export class NodeApp extends App {
 					// Cancelling the reader may reject not just because of
 					// an error in the ReadableStream's cancel callback, but
 					// also because of an error anywhere in the stream.
-					reader.cancel().catch(err => {
-						console.error(`There was an uncaught error in the middle of the stream while rendering ${destination.req.url}.`, err);
+					reader.cancel().catch((err) => {
+						console.error(
+							`There was an uncaught error in the middle of the stream while rendering ${destination.req.url}.`,
+							err
+						);
 					});
 				});
 				let result = await reader.read();
@@ -120,13 +117,13 @@ export class NodeApp extends App {
 					destination.write(result.value);
 					result = await reader.read();
 				}
-			// the error will be logged by the "on end" callback above
+				// the error will be logged by the "on end" callback above
 			} catch {
 				destination.write('Internal server error');
 			}
 		}
 		destination.end();
-	};
+	}
 }
 
 function makeRequestHeaders(req: NodeRequest): Headers {
diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts
index 26bdc778d644..47ed11aaf6fc 100644
--- a/packages/astro/src/core/config/schema.ts
+++ b/packages/astro/src/core/config/schema.ts
@@ -17,9 +17,11 @@ import { appendForwardSlash, prependForwardSlash, removeTrailingForwardSlash } f
 // This import is required to appease TypeScript!
 // See https://github.com/withastro/astro/pull/8762
 import 'mdast-util-to-hast';
+import 'shikiji-core';
 
 type ShikiLangs = NonNullable<ShikiConfig['langs']>;
 type ShikiTheme = NonNullable<ShikiConfig['theme']>;
+type ShikiTransformers = NonNullable<ShikiConfig['transformers']>;
 
 const ASTRO_CONFIG_DEFAULTS = {
 	root: '.',
@@ -58,6 +60,7 @@ const ASTRO_CONFIG_DEFAULTS = {
 	experimental: {
 		optimizeHoistedScript: false,
 		contentCollectionCache: false,
+		clientPrerender: false,
 	},
 } satisfies AstroUserConfig & { server: { open: boolean } };
 
@@ -277,6 +280,10 @@ export const AstroConfigSchema = z.object({
 						)
 						.default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.experimentalThemes!),
 					wrap: z.boolean().or(z.null()).default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.wrap!),
+					transformers: z
+						.custom<ShikiTransformers[number]>()
+						.array()
+						.default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.transformers!),
 				})
 				.default({}),
 			remarkPlugins: z
@@ -410,6 +417,10 @@ export const AstroConfigSchema = z.object({
 				.boolean()
 				.optional()
 				.default(ASTRO_CONFIG_DEFAULTS.experimental.contentCollectionCache),
+			clientPrerender: z
+				.boolean()
+				.optional()
+				.default(ASTRO_CONFIG_DEFAULTS.experimental.clientPrerender),
 		})
 		.strict(
 			`Invalid or outdated experimental feature.\nCheck for incorrect spelling or outdated Astro version.\nSee https://docs.astro.build/en/reference/configuration-reference/#experimental-flags for a list of all current experiments.`
diff --git a/packages/astro/src/core/errors/dev/vite.ts b/packages/astro/src/core/errors/dev/vite.ts
index 1bd448145123..bfdd043a7567 100644
--- a/packages/astro/src/core/errors/dev/vite.ts
+++ b/packages/astro/src/core/errors/dev/vite.ts
@@ -1,7 +1,6 @@
-import { replaceCssVariables } from '@astrojs/markdown-remark';
 import * as fs from 'node:fs';
 import { fileURLToPath } from 'node:url';
-import { codeToHtml } from 'shikiji';
+import { codeToHtml, createCssVariablesTheme } from 'shikiji';
 import type { ErrorPayload } from 'vite';
 import type { ModuleLoader } from '../../module-loader/index.js';
 import { FailedToLoadModuleSSR, InvalidGlob, MdxIntegrationMissingError } from '../errors-data.js';
@@ -124,7 +123,11 @@ export interface AstroErrorPayload {
 // Map these to `.js` during error highlighting.
 const ALTERNATIVE_JS_EXTS = ['cjs', 'mjs'];
 const ALTERNATIVE_MD_EXTS = ['mdoc'];
-const INLINE_STYLE_SELECTOR_GLOBAL = /style="(.*?)"/g;
+
+let _cssVariablesTheme: ReturnType<typeof createCssVariablesTheme>;
+const cssVariablesTheme = () =>
+	_cssVariablesTheme ??
+	(_cssVariablesTheme = createCssVariablesTheme({ variablePrefix: '--astro-code-' }));
 
 /**
  * Generate a payload for Vite's error overlay
@@ -147,21 +150,15 @@ export async function getViteErrorPayload(err: ErrorWithMetadata): Promise<Astro
 	if (ALTERNATIVE_MD_EXTS.includes(highlighterLang ?? '')) {
 		highlighterLang = 'md';
 	}
-	let highlightedCode = err.fullCode
+	const highlightedCode = err.fullCode
 		? await codeToHtml(err.fullCode, {
 				// @ts-expect-error always assume that shiki can accept the lang string
 				lang: highlighterLang,
-				theme: 'css-variables',
+				theme: cssVariablesTheme(),
 				lineOptions: err.loc?.line ? [{ line: err.loc.line, classes: ['error-line'] }] : undefined,
 			})
 		: undefined;
 
-	if (highlightedCode) {
-		highlightedCode = highlightedCode.replace(INLINE_STYLE_SELECTOR_GLOBAL, (m) =>
-			replaceCssVariables(m)
-		);
-	}
-
 	return {
 		type: 'error',
 		err: {
diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts
index 1062680bd9da..282c79cd6a21 100644
--- a/packages/astro/src/core/errors/overlay.ts
+++ b/packages/astro/src/core/errors/overlay.ts
@@ -68,7 +68,7 @@ const style = /* css */ `
     --toggle-border-color: #C3CADB;
 
   /* Syntax Highlighting */
-  --astro-code-color-text: #000000;
+  --astro-code-foreground: #000000;
   --astro-code-token-constant: #4ca48f;
   --astro-code-token-string: #9f722a;
   --astro-code-token-comment: #8490b5;
@@ -121,7 +121,7 @@ const style = /* css */ `
   --toggle-border-color: #3D4663;
 
   /* Syntax Highlighting */
-  --astro-code-color-text: #ffffff;
+  --astro-code-foreground: #ffffff;
   --astro-code-token-constant: #90f4e3;
   --astro-code-token-string: #f4cf90;
   --astro-code-token-comment: #8490b5;
diff --git a/packages/astro/src/prefetch/index.ts b/packages/astro/src/prefetch/index.ts
index 99cf3627af8e..b56f9fffd2c4 100644
--- a/packages/astro/src/prefetch/index.ts
+++ b/packages/astro/src/prefetch/index.ts
@@ -16,6 +16,8 @@ const listenedAnchors = new WeakSet<HTMLAnchorElement>();
 let prefetchAll: boolean = __PREFETCH_PREFETCH_ALL__;
 // @ts-expect-error injected global
 let defaultStrategy: string = __PREFETCH_DEFAULT_STRATEGY__;
+// @ts-expect-error injected global
+let clientPrerender: boolean = __EXPERIMENTAL_CLIENT_PRERENDER__;
 
 interface InitOptions {
 	defaultStrategy?: string;
@@ -216,7 +218,14 @@ export function prefetch(url: string, opts?: PrefetchOptions) {
 	const priority = opts?.with ?? 'link';
 	debug?.(`[astro] Prefetching ${url} with ${priority}`);
 
-	if (priority === 'link') {
+	if (
+		clientPrerender &&
+		HTMLScriptElement.supports &&
+		HTMLScriptElement.supports('speculationrules')
+	) {
+		// this code is tree-shaken if unused
+		appendSpeculationRules(url);
+	} else if (priority === 'link') {
 		const link = document.createElement('link');
 		link.rel = 'prefetch';
 		link.setAttribute('href', url);
@@ -301,3 +310,26 @@ function onPageLoad(cb: () => void) {
 		cb();
 	});
 }
+
+/**
+ * Appends a `<script type="speculationrules">` tag to the head of the
+ * document that prerenders the `url` passed in.
+ *
+ * Modifying the script and appending a new link does not trigger the prerender.
+ * A new script must be added for each `url`.
+ *
+ * @param url The url of the page to prerender.
+ */
+function appendSpeculationRules(url: string) {
+	const script = document.createElement('script');
+	script.type = 'speculationrules';
+	script.textContent = JSON.stringify({
+		prerender: [
+			{
+				source: 'list',
+				urls: [url],
+			},
+		],
+	});
+	document.head.append(script);
+}
diff --git a/packages/astro/src/prefetch/vite-plugin-prefetch.ts b/packages/astro/src/prefetch/vite-plugin-prefetch.ts
index 83c3c3ff7c59..2f50f67af288 100644
--- a/packages/astro/src/prefetch/vite-plugin-prefetch.ts
+++ b/packages/astro/src/prefetch/vite-plugin-prefetch.ts
@@ -49,7 +49,11 @@ export default function astroPrefetch({ settings }: { settings: AstroSettings })
 			if (id.includes(prefetchInternalModuleFsSubpath)) {
 				return code
 					.replace('__PREFETCH_PREFETCH_ALL__', JSON.stringify(prefetch?.prefetchAll))
-					.replace('__PREFETCH_DEFAULT_STRATEGY__', JSON.stringify(prefetch?.defaultStrategy));
+					.replace('__PREFETCH_DEFAULT_STRATEGY__', JSON.stringify(prefetch?.defaultStrategy))
+					.replace(
+						'__EXPERIMENTAL_CLIENT_PRERENDER__',
+						JSON.stringify(settings.config.experimental.clientPrerender)
+					);
 			}
 		},
 	};
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/a11y.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/a11y.ts
index 537b03e00d39..e004b70b5fb1 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/a11y.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/a11y.ts
@@ -397,29 +397,29 @@ export const a11y: AuditRuleWithSelector[] = [
 
 			const inputElements = element.querySelectorAll('input');
 			for (const input of inputElements) {
-					// Check for alt attribute if input type is image
-					if (input.type === 'image') {
-							const altAttribute = input.getAttribute('alt');
-							if (altAttribute && altAttribute.trim() !== '') return false;
-					}
-			
-					// Check for aria-label
-					const inputAriaLabel = input.getAttribute('aria-label')?.trim();
-					if (inputAriaLabel && inputAriaLabel !== '') return false;
-			
-					// Check for aria-labelledby
-					const inputAriaLabelledby = input.getAttribute('aria-labelledby')?.trim();
-					if (inputAriaLabelledby) {
-							const ids = inputAriaLabelledby.split(' ');
-							for (const id of ids) {
-									const referencedElement = document.getElementById(id);
-									if (referencedElement && referencedElement.innerText.trim() !== '') return false;
-							}
+				// Check for alt attribute if input type is image
+				if (input.type === 'image') {
+					const altAttribute = input.getAttribute('alt');
+					if (altAttribute && altAttribute.trim() !== '') return false;
+				}
+
+				// Check for aria-label
+				const inputAriaLabel = input.getAttribute('aria-label')?.trim();
+				if (inputAriaLabel && inputAriaLabel !== '') return false;
+
+				// Check for aria-labelledby
+				const inputAriaLabelledby = input.getAttribute('aria-labelledby')?.trim();
+				if (inputAriaLabelledby) {
+					const ids = inputAriaLabelledby.split(' ');
+					for (const id of ids) {
+						const referencedElement = document.getElementById(id);
+						if (referencedElement && referencedElement.innerText.trim() !== '') return false;
 					}
-					
-					// Check for title
-					const title = input.getAttribute('title')?.trim();
-					if (title && title !== '') return false;
+				}
+
+				// Check for title
+				const title = input.getAttribute('title')?.trim();
+				if (title && title !== '') return false;
 			}
 
 			// If all checks fail, return true indicating missing content
diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts
index 959d34ec97cd..1123c28784aa 100644
--- a/packages/astro/src/vite-plugin-markdown/images.ts
+++ b/packages/astro/src/vite-plugin-markdown/images.ts
@@ -2,33 +2,60 @@ export type MarkdownImagePath = { raw: string; resolved: string; safeName: strin
 
 export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: string) {
 	return `
-		import { getImage } from "astro:assets";
-		${imagePaths
-			.map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`)
-			.join('\n')}
+			import { getImage } from "astro:assets";
+			${imagePaths
+				.map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`)
+				.join('\n')}
 
-		const images = async function() {
-			return {
-				${imagePaths
-					.map((entry) => `"${entry.raw}": await getImage({src: Astro__${entry.safeName}})`)
-					.join(',\n')}
-				}
-			}
+			const images = async function(html) {
+					const imageSources = {};
+					${imagePaths
+						.map((entry) => {
+							const rawUrl = JSON.stringify(entry.raw);
+							return `{
+											const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${rawUrl} + '[^"]*)"', 'g');
+											let match;
+											let occurrenceCounter = 0;
+											while ((match = regex.exec(html)) !== null) {
+													const matchKey = ${rawUrl} + '_' + occurrenceCounter;
+													const imageProps = JSON.parse(match[1].replace(/&#x22;/g, '"'));
+													const { src, ...props } = imageProps;
+
+													imageSources[matchKey] = await getImage({src: Astro__${entry.safeName}, ...props});
+													occurrenceCounter++;
+											}
+									}`;
+						})
+						.join('\n')}
+					return imageSources;
+			};
 
 			async function updateImageReferences(html) {
-				return images().then((images) => {
-					return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) =>
-					spreadAttributes({
-						src: images[imagePath].src,
-						...images[imagePath].attributes,
-					})
-					);
+				return images(html).then((imageSources) => {
+						return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) => {
+								const decodedImagePath = JSON.parse(imagePath.replace(/&#x22;/g, '"'));
+		
+								// Use the 'index' property for each image occurrence
+								const srcKey = decodedImagePath.src + '_' + decodedImagePath.index;
+		
+								if (imageSources[srcKey].srcSet && imageSources[srcKey].srcSet.values.length > 0) {
+										imageSources[srcKey].attributes.srcset = imageSources[srcKey].srcSet.attribute;
+								}
+		
+								const { index, ...attributesWithoutIndex } = imageSources[srcKey].attributes;
+		
+								return spreadAttributes({
+										src: imageSources[srcKey].src,
+										...attributesWithoutIndex,
+								});
+						});
 				});
-			}
+		}
+		
 
-			// NOTE: This causes a top-level await to appear in the user's code, which can break very easily due to a Rollup
-			// bug and certain adapters not supporting it correctly. See: https://github.com/rollup/rollup/issues/4708
-			// Tread carefully!
+		// NOTE: This causes a top-level await to appear in the user's code, which can break very easily due to a Rollup
+	  // bug and certain adapters not supporting it correctly. See: https://github.com/rollup/rollup/issues/4708
+	  // Tread carefully!
 			const html = await updateImageReferences(${JSON.stringify(html)});
-		`;
+	`;
 }
diff --git a/packages/astro/test/astro-cookies.test.js b/packages/astro/test/astro-cookies.test.js
index 7b6cfafa7478..e201ebd876b8 100644
--- a/packages/astro/test/astro-cookies.test.js
+++ b/packages/astro/test/astro-cookies.test.js
@@ -93,18 +93,20 @@ describe('Astro.cookies', () => {
 			const request = new Request('http://example.com/set-value', {
 				method: 'POST',
 			});
-			const response = await app.render(request, { addCookieHeader: true })
+			const response = await app.render(request, { addCookieHeader: true });
 			expect(response.status).to.equal(200);
-			expect(response.headers.get("Set-Cookie")).to.be.a('string').and.satisfy(value => value.startsWith("admin=true; Expires="));
+			expect(response.headers.get('Set-Cookie'))
+				.to.be.a('string')
+				.and.satisfy((value) => value.startsWith('admin=true; Expires='));
 		});
 
 		it('app.render can exclude the cookie from the Set-Cookie header', async () => {
 			const request = new Request('http://example.com/set-value', {
 				method: 'POST',
 			});
-			const response = await app.render(request, { addCookieHeader: false })
+			const response = await app.render(request, { addCookieHeader: false });
 			expect(response.status).to.equal(200);
-			expect(response.headers.get("Set-Cookie")).to.equal(null);
+			expect(response.headers.get('Set-Cookie')).to.equal(null);
 		});
 
 		it('Early returning a Response still includes set headers', async () => {
diff --git a/packages/astro/test/client-address.test.js b/packages/astro/test/client-address.test.js
index 5d6df5ac9e61..339d17ad94de 100644
--- a/packages/astro/test/client-address.test.js
+++ b/packages/astro/test/client-address.test.js
@@ -33,7 +33,7 @@ describe('Astro.clientAddress', () => {
 			it('app.render can provide the address', async () => {
 				const app = await fixture.loadTestAdapterApp();
 				const request = new Request('http://example.com/');
-				const response = await app.render(request, { clientAddress: "1.1.1.1" });
+				const response = await app.render(request, { clientAddress: '1.1.1.1' });
 				const html = await response.text();
 				const $ = cheerio.load(html);
 				expect($('#address').text()).to.equal('1.1.1.1');
diff --git a/packages/astro/test/core-image-remark-imgattr.test.js b/packages/astro/test/core-image-remark-imgattr.test.js
new file mode 100644
index 000000000000..791014329720
--- /dev/null
+++ b/packages/astro/test/core-image-remark-imgattr.test.js
@@ -0,0 +1,62 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { Writable } from 'node:stream';
+
+import { Logger } from '../dist/core/logger/core.js';
+import { loadFixture } from './test-utils.js';
+
+describe('astro:image', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	describe('dev', () => {
+		/** @type {import('./test-utils').DevServer} */
+		let devServer;
+		/** @type {Array<{ type: any, level: 'error', message: string; }>} */
+		let logs = [];
+
+		before(async () => {
+			fixture = await loadFixture({
+				root: './fixtures/core-image-remark-imgattr/',
+			});
+
+			devServer = await fixture.startDevServer({
+				logger: new Logger({
+					level: 'error',
+					dest: new Writable({
+						objectMode: true,
+						write(event, _, callback) {
+							logs.push(event);
+							callback();
+						},
+					}),
+				}),
+			});
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		describe('Test image attributes can be added by remark plugins', () => {
+			let $;
+			before(async () => {
+				let res = await fixture.fetch('/');
+				let html = await res.text();
+				$ = cheerio.load(html);
+			});
+
+			it('Image has eager loading meaning getImage passed props it doesnt use through it', async () => {
+				let $img = $('img');
+				expect($img.attr('loading')).to.equal('eager');
+			});
+
+			it('Image src contains w=50 meaning getImage correctly used props added through the remark plugin', async () => {
+				let $img = $('img');
+				expect(new URL($img.attr('src'), 'http://example.com').searchParams.get('w')).to.equal(
+					'50'
+				);
+			});
+		});
+	});
+});
diff --git a/packages/astro/test/fixtures/core-image-remark-imgattr/astro.config.mjs b/packages/astro/test/fixtures/core-image-remark-imgattr/astro.config.mjs
new file mode 100644
index 000000000000..1ccf7caf00e5
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-remark-imgattr/astro.config.mjs
@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config';
+import plugin from "./remarkPlugin"
+
+// https://astro.build/config
+export default defineConfig({
+	markdown: {
+		remarkPlugins:[plugin]
+	}
+});
diff --git a/packages/astro/test/fixtures/core-image-remark-imgattr/package.json b/packages/astro/test/fixtures/core-image-remark-imgattr/package.json
new file mode 100644
index 000000000000..3732356a4e9a
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-remark-imgattr/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@test/core-image-remark-imgattr",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  },
+  "scripts": {
+    "dev": "astro dev"
+  }
+}
diff --git a/packages/astro/test/fixtures/core-image-remark-imgattr/remarkPlugin.js b/packages/astro/test/fixtures/core-image-remark-imgattr/remarkPlugin.js
new file mode 100644
index 000000000000..4bad8fb77c82
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-remark-imgattr/remarkPlugin.js
@@ -0,0 +1,20 @@
+export default function plugin() {
+	return transformer;
+
+	function transformer(tree) {
+		function traverse(node) {
+			if (node.type === "image") {
+				node.data = node.data || {};
+				node.data.hProperties = node.data.hProperties || {};
+				node.data.hProperties.loading = "eager";
+				node.data.hProperties.width = "50";
+			}
+
+			if (node.children) {
+				node.children.forEach(traverse);
+			}
+		}
+
+		traverse(tree);
+	}
+}
diff --git a/packages/astro/test/fixtures/core-image-remark-imgattr/src/assets/penguin2.jpg b/packages/astro/test/fixtures/core-image-remark-imgattr/src/assets/penguin2.jpg
new file mode 100644
index 000000000000..e859ac3c992f
Binary files /dev/null and b/packages/astro/test/fixtures/core-image-remark-imgattr/src/assets/penguin2.jpg differ
diff --git a/packages/astro/test/fixtures/core-image-remark-imgattr/src/pages/index.md b/packages/astro/test/fixtures/core-image-remark-imgattr/src/pages/index.md
new file mode 100644
index 000000000000..e415e505d69d
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-remark-imgattr/src/pages/index.md
@@ -0,0 +1 @@
+![alt](../assets/penguin2.jpg)
diff --git a/packages/astro/test/fixtures/core-image-remark-imgattr/tsconfig.json b/packages/astro/test/fixtures/core-image-remark-imgattr/tsconfig.json
new file mode 100644
index 000000000000..72b184b171ae
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-remark-imgattr/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+  }
+}
diff --git a/packages/astro/test/units/content-collections/get-entry-type.test.js b/packages/astro/test/units/content-collections/get-entry-type.test.js
index a953d0c8fedc..a9c4e3c39e7f 100644
--- a/packages/astro/test/units/content-collections/get-entry-type.test.js
+++ b/packages/astro/test/units/content-collections/get-entry-type.test.js
@@ -65,22 +65,12 @@ describe('Content Collections - getEntryType', () => {
 				expect(type).to.equal('config');
 			});
 
-			it('Returns "unsupported" for non-Markdown files', () => {
-				const entry = fileURLToPath(new URL('blog/robots.txt', contentPaths.contentDir));
-				const type = getEntryType(entry, contentPaths, contentFileExts, dataFileExts);
-				expect(type).to.equal('unsupported');
-			});
-
-			it('Returns "ignored" for .DS_Store', () => {
-				const entry = fileURLToPath(new URL('blog/.DS_Store', contentPaths.contentDir));
-				const type = getEntryType(entry, contentPaths, contentFileExts, dataFileExts);
-				expect(type).to.equal('ignored');
-			});
-
-			it('Returns "ignored" for unsupported files using an underscore', () => {
-				const entry = fileURLToPath(new URL('blog/_draft-robots.txt', contentPaths.contentDir));
-				const type = getEntryType(entry, contentPaths, contentFileExts, dataFileExts);
-				expect(type).to.equal('ignored');
+			it('Returns "ignored" for non-Markdown files', () => {
+				for (const entryPath of ['blog/robots.txt', 'blog/first-post.png', '.DS_Store']) {
+					const entry = fileURLToPath(new URL(entryPath, contentPaths.contentDir));
+					const type = getEntryType(entry, contentPaths, contentFileExts, dataFileExts);
+					expect(type).to.equal('ignored');
+				}
 			});
 
 			it('Returns "ignored" when using underscore on file name', () => {
@@ -94,12 +84,6 @@ describe('Content Collections - getEntryType', () => {
 				const type = getEntryType(entry, contentPaths, contentFileExts, dataFileExts);
 				expect(type).to.equal('ignored');
 			});
-
-			it('Returns "ignored" for images', () => {
-				const entry = fileURLToPath(new URL('blog/first-post.png', contentPaths.contentDir));
-				const type = getEntryType(entry, contentPaths, contentFileExts, dataFileExts);
-				expect(type).to.equal('ignored');
-			});
 		});
 	});
 });
diff --git a/packages/integrations/markdoc/package.json b/packages/integrations/markdoc/package.json
index d3edca0afc0b..0c6a997f03d0 100644
--- a/packages/integrations/markdoc/package.json
+++ b/packages/integrations/markdoc/package.json
@@ -71,7 +71,6 @@
     "gray-matter": "^4.0.3",
     "htmlparser2": "^9.0.0",
     "kleur": "^4.1.5",
-    "shikiji": "^0.6.13",
     "zod": "^3.22.4"
   },
   "peerDependencies": {
diff --git a/packages/integrations/node/src/log-listening-on.ts b/packages/integrations/node/src/log-listening-on.ts
index 4f56b3ee8bd2..5ce93bfd7bb4 100644
--- a/packages/integrations/node/src/log-listening-on.ts
+++ b/packages/integrations/node/src/log-listening-on.ts
@@ -1,20 +1,24 @@
-import os from "node:os";
-import type http from "node:http";
-import https from "node:https";
-import type { AstroIntegrationLogger } from "astro";
+import os from 'node:os';
+import type http from 'node:http';
+import https from 'node:https';
+import type { AstroIntegrationLogger } from 'astro';
 import type { Options } from './types.js';
-import type { AddressInfo } from "node:net";
+import type { AddressInfo } from 'node:net';
 
-export async function logListeningOn(logger: AstroIntegrationLogger, server: http.Server | https.Server, options: Pick<Options, "host">) {
-	await new Promise<void>(resolve => server.once('listening', resolve)) 
-    const protocol = server instanceof https.Server ? 'https' : 'http';
-    // Allow to provide host value at runtime
+export async function logListeningOn(
+	logger: AstroIntegrationLogger,
+	server: http.Server | https.Server,
+	options: Pick<Options, 'host'>
+) {
+	await new Promise<void>((resolve) => server.once('listening', resolve));
+	const protocol = server instanceof https.Server ? 'https' : 'http';
+	// Allow to provide host value at runtime
 	const host = getResolvedHostForHttpServer(
 		process.env.HOST !== undefined && process.env.HOST !== '' ? process.env.HOST : options.host
 	);
-    const { port } = server.address() as AddressInfo;
+	const { port } = server.address() as AddressInfo;
 	const address = getNetworkAddress(protocol, host, port);
-    
+
 	if (host === undefined) {
 		logger.info(
 			`Server listening on \n  local: ${address.local[0]} \t\n  network: ${address.network[0]}\n`
diff --git a/packages/integrations/node/src/middleware.ts b/packages/integrations/node/src/middleware.ts
index a936dc5bc92c..6b6c2afee4a1 100644
--- a/packages/integrations/node/src/middleware.ts
+++ b/packages/integrations/node/src/middleware.ts
@@ -1,34 +1,32 @@
 import { createAppHandler } from './serve-app.js';
-import type { RequestHandler } from "./types.js";
-import type { NodeApp } from "astro/app/node";
+import type { RequestHandler } from './types.js';
+import type { NodeApp } from 'astro/app/node';
 
 /**
  * Creates a middleware that can be used with Express, Connect, etc.
- * 
+ *
  * Similar to `createAppHandler` but can additionally be placed in the express
  * chain as an error middleware.
- * 
+ *
  * https://expressjs.com/en/guide/using-middleware.html#middleware.error-handling
  */
-export default function createMiddleware(
-    app: NodeApp,
-): RequestHandler {
-    const handler = createAppHandler(app)
-    const logger = app.getAdapterLogger()
-    // using spread args because express trips up if the function's
-    // stringified body includes req, res, next, locals directly
-    return async function (...args) {
-        // assume normal invocation at first
-        const [req, res, next, locals] = args;
-        // short circuit if it is an error invocation
-        if (req instanceof Error) {
-            const error = req;
-            if (next) {
-                return next(error);
-            } else {
-                throw error;
-            }
-        }
+export default function createMiddleware(app: NodeApp): RequestHandler {
+	const handler = createAppHandler(app);
+	const logger = app.getAdapterLogger();
+	// using spread args because express trips up if the function's
+	// stringified body includes req, res, next, locals directly
+	return async function (...args) {
+		// assume normal invocation at first
+		const [req, res, next, locals] = args;
+		// short circuit if it is an error invocation
+		if (req instanceof Error) {
+			const error = req;
+			if (next) {
+				return next(error);
+			} else {
+				throw error;
+			}
+		}
 		try {
 			await handler(req, res, next, locals);
 		} catch (err) {
@@ -39,5 +37,5 @@ export default function createMiddleware(
 				res.end();
 			}
 		}
-    }
+	};
 }
diff --git a/packages/integrations/node/src/preview.ts b/packages/integrations/node/src/preview.ts
index 26b91756c8f0..e8747ad0d901 100644
--- a/packages/integrations/node/src/preview.ts
+++ b/packages/integrations/node/src/preview.ts
@@ -33,16 +33,16 @@ const createPreviewServer: CreatePreviewServer = async function (preview) {
 			throw err;
 		}
 	}
-	const host = preview.host ?? "localhost"
-	const port = preview.port ?? 4321
+	const host = preview.host ?? 'localhost';
+	const port = preview.port ?? 4321;
 	const server = createServer(ssrHandler, host, port);
-	logListeningOn(preview.logger, server.server, options)
+	logListeningOn(preview.logger, server.server, options);
 	await new Promise<void>((resolve, reject) => {
-	    server.server.once('listening', resolve);
-	    server.server.once('error', reject);
-	    server.server.listen(port, host);
+		server.server.once('listening', resolve);
+		server.server.once('error', reject);
+		server.server.listen(port, host);
 	});
 	return server;
 };
 
-export { createPreviewServer as default }
+export { createPreviewServer as default };
diff --git a/packages/integrations/node/src/serve-app.ts b/packages/integrations/node/src/serve-app.ts
index 51ef3157525d..f2fc61f010d4 100644
--- a/packages/integrations/node/src/serve-app.ts
+++ b/packages/integrations/node/src/serve-app.ts
@@ -1,5 +1,5 @@
-import { NodeApp } from "astro/app/node"
-import type { RequestHandler } from "./types.js";
+import { NodeApp } from 'astro/app/node';
+import type { RequestHandler } from './types.js';
 
 /**
  * Creates a Node.js http listener for on-demand rendered pages, compatible with http.createServer and Connect middleware.
@@ -7,21 +7,21 @@ import type { RequestHandler } from "./types.js";
  * Intended to be used in both standalone and middleware mode.
  */
 export function createAppHandler(app: NodeApp): RequestHandler {
-    return async (req, res, next, locals) => {
-        const request = NodeApp.createRequest(req);
-        const routeData = app.match(request);
-        if (routeData) {
-            const response = await app.render(request, {
-                addCookieHeader: true,
-                locals,
-                routeData,
-            });
-            await NodeApp.writeResponse(response, res);
-        } else if (next) {
-            return next();
-        } else {
-            const response = await app.render(req);
-            await NodeApp.writeResponse(response, res);
-        }
-    }
+	return async (req, res, next, locals) => {
+		const request = NodeApp.createRequest(req);
+		const routeData = app.match(request);
+		if (routeData) {
+			const response = await app.render(request, {
+				addCookieHeader: true,
+				locals,
+				routeData,
+			});
+			await NodeApp.writeResponse(response, res);
+		} else if (next) {
+			return next();
+		} else {
+			const response = await app.render(req);
+			await NodeApp.writeResponse(response, res);
+		}
+	};
 }
diff --git a/packages/integrations/node/src/serve-static.ts b/packages/integrations/node/src/serve-static.ts
index ee3bdaf791b6..77de9b35809c 100644
--- a/packages/integrations/node/src/serve-static.ts
+++ b/packages/integrations/node/src/serve-static.ts
@@ -1,9 +1,9 @@
-import path from "node:path";
-import url from "node:url";
-import send from "send";
-import type { IncomingMessage, ServerResponse } from "node:http";
-import type { Options } from "./types.js";
-import type { NodeApp } from "astro/app/node";
+import path from 'node:path';
+import url from 'node:url';
+import send from 'send';
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { Options } from './types.js';
+import type { NodeApp } from 'astro/app/node';
 
 /**
  * Creates a Node.js http listener for static files and prerendered pages.
@@ -16,7 +16,7 @@ export function createStaticHandler(app: NodeApp, options: Options) {
 	/**
 	 * @param ssr The SSR handler to be called if the static handler does not find a matching file.
 	 */
-    return (req: IncomingMessage, res: ServerResponse, ssr: () => unknown) => {
+	return (req: IncomingMessage, res: ServerResponse, ssr: () => unknown) => {
 		if (req.url) {
 			let pathname = app.removeBase(req.url);
 			pathname = decodeURI(new URL(pathname, 'http://host').pathname);
@@ -39,7 +39,7 @@ export function createStaticHandler(app: NodeApp, options: Options) {
 				ssr();
 			});
 			stream.on('headers', (_res: ServerResponse) => {
-                // assets in dist/_astro are hashed and should get the immutable header
+				// assets in dist/_astro are hashed and should get the immutable header
 				if (pathname.startsWith(`/${options.assets}/`)) {
 					// This is the "far future" cache header, used for static files whose name includes their digest hash.
 					// 1 year (31,536,000 seconds) is convention.
diff --git a/packages/integrations/node/src/server.ts b/packages/integrations/node/src/server.ts
index 5c2577ff8d5d..d9f24cca5efb 100644
--- a/packages/integrations/node/src/server.ts
+++ b/packages/integrations/node/src/server.ts
@@ -11,9 +11,7 @@ export function createExports(manifest: SSRManifest, options: Options) {
 	return {
 		options: options,
 		handler:
-			options.mode === "middleware"
-				? createMiddleware(app)
-				: createStandaloneHandler(app, options),
+			options.mode === 'middleware' ? createMiddleware(app) : createStandaloneHandler(app, options),
 		startServer: () => startServer(app, options),
 	};
 }
diff --git a/packages/integrations/node/src/standalone.ts b/packages/integrations/node/src/standalone.ts
index fc1875e972b4..9fa8bd88c7af 100644
--- a/packages/integrations/node/src/standalone.ts
+++ b/packages/integrations/node/src/standalone.ts
@@ -12,13 +12,13 @@ import type { PreviewServer } from 'astro';
 export default function standalone(app: NodeApp, options: Options) {
 	const port = process.env.PORT ? Number(process.env.PORT) : options.port ?? 8080;
 	// Allow to provide host value at runtime
-	const hostOptions = typeof options.host === "boolean" ? "localhost" : options.host
+	const hostOptions = typeof options.host === 'boolean' ? 'localhost' : options.host;
 	const host = process.env.HOST ?? hostOptions;
 	const handler = createStandaloneHandler(app, options);
 	const server = createServer(handler, host, port);
-	server.server.listen(port, host)
-	if (process.env.ASTRO_NODE_LOGGING !== "disabled") {
-		logListeningOn(app.getAdapterLogger(), server.server, options)
+	server.server.listen(port, host);
+	if (process.env.ASTRO_NODE_LOGGING !== 'disabled') {
+		logListeningOn(app.getAdapterLogger(), server.server, options);
 	}
 	return {
 		server,
@@ -40,15 +40,11 @@ export function createStandaloneHandler(app: NodeApp, options: Options) {
 			return;
 		}
 		staticHandler(req, res, () => appHandler(req, res));
-	}
+	};
 }
 
 // also used by preview entrypoint
-export function createServer(
-	listener: http.RequestListener,
-	host: string,
-	port: number
-) {
+export function createServer(listener: http.RequestListener, host: string, port: number) {
 	let httpServer: http.Server | https.Server;
 
 	if (process.env.SERVER_CERT_PATH && process.env.SERVER_KEY_PATH) {
@@ -69,7 +65,7 @@ export function createServer(
 		httpServer.addListener('close', resolve);
 		httpServer.addListener('error', reject);
 	});
-	
+
 	const previewable = {
 		host,
 		port,
@@ -80,7 +76,7 @@ export function createServer(
 			await new Promise((resolve, reject) => {
 				httpServer.destroy((err) => (err ? reject(err) : resolve(undefined)));
 			});
-		}
+		},
 	} satisfies PreviewServer;
 
 	return {
diff --git a/packages/integrations/node/test/test-utils.js b/packages/integrations/node/test/test-utils.js
index 6c8c5d270628..8d830fee9831 100644
--- a/packages/integrations/node/test/test-utils.js
+++ b/packages/integrations/node/test/test-utils.js
@@ -2,8 +2,8 @@ import httpMocks from 'node-mocks-http';
 import { EventEmitter } from 'node:events';
 import { loadFixture as baseLoadFixture } from '../../../astro/test/test-utils.js';
 
-process.env.ASTRO_NODE_AUTOSTART = "disabled";
-process.env.ASTRO_NODE_LOGGING = "disabled";
+process.env.ASTRO_NODE_AUTOSTART = 'disabled';
+process.env.ASTRO_NODE_LOGGING = 'disabled';
 /**
  * @typedef {import('../../../astro/test/test-utils').Fixture} Fixture
  */
diff --git a/packages/integrations/vercel/src/serverless/entrypoint.ts b/packages/integrations/vercel/src/serverless/entrypoint.ts
index 5d4c7cb21cce..dedc7fcc1a64 100644
--- a/packages/integrations/vercel/src/serverless/entrypoint.ts
+++ b/packages/integrations/vercel/src/serverless/entrypoint.ts
@@ -9,12 +9,14 @@ export const createExports = (manifest: SSRManifest) => {
 	const app = new NodeApp(manifest);
 	const handler = async (req: IncomingMessage, res: ServerResponse) => {
 		const clientAddress = req.headers['x-forwarded-for'] as string | undefined;
-		const localsHeader = req.headers[ASTRO_LOCALS_HEADER]
+		const localsHeader = req.headers[ASTRO_LOCALS_HEADER];
 		const locals =
-			typeof localsHeader === "string" ? JSON.parse(localsHeader)
-			: Array.isArray(localsHeader) ? JSON.parse(localsHeader[0])
-			: {};
-		const webResponse  = await app.render(req, { locals, clientAddress })
+			typeof localsHeader === 'string'
+				? JSON.parse(localsHeader)
+				: Array.isArray(localsHeader)
+					? JSON.parse(localsHeader[0])
+					: {};
+		const webResponse = await app.render(req, { locals, clientAddress });
 		await NodeApp.writeResponse(webResponse, res);
 	};
 
diff --git a/packages/markdown/remark/package.json b/packages/markdown/remark/package.json
index c65a582e77a7..8594fcb2fd17 100644
--- a/packages/markdown/remark/package.json
+++ b/packages/markdown/remark/package.json
@@ -38,7 +38,7 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.0.0",
     "remark-smartypants": "^2.0.0",
-    "shikiji": "^0.6.13",
+    "shikiji": "^0.9.18",
     "unified": "^11.0.4",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.1"
diff --git a/packages/markdown/remark/src/index.ts b/packages/markdown/remark/src/index.ts
index 14301584793c..7881614e5dbd 100644
--- a/packages/markdown/remark/src/index.ts
+++ b/packages/markdown/remark/src/index.ts
@@ -36,6 +36,7 @@ export const markdownConfigDefaults: Required<AstroMarkdownOptions> = {
 		theme: 'github-dark',
 		experimentalThemes: {},
 		wrap: false,
+		transformers: [],
 	},
 	remarkPlugins: [],
 	rehypePlugins: [],
diff --git a/packages/markdown/remark/src/rehype-images.ts b/packages/markdown/remark/src/rehype-images.ts
index fd1e8f70f1cc..71783ca1a050 100644
--- a/packages/markdown/remark/src/rehype-images.ts
+++ b/packages/markdown/remark/src/rehype-images.ts
@@ -4,14 +4,25 @@ import type { MarkdownVFile } from './types.js';
 export function rehypeImages() {
 	return () =>
 		function (tree: any, file: MarkdownVFile) {
+			const imageOccurrenceMap = new Map();
+
 			visit(tree, (node) => {
 				if (node.type !== 'element') return;
 				if (node.tagName !== 'img') return;
 
 				if (node.properties?.src) {
 					if (file.data.imagePaths?.has(node.properties.src)) {
-						node.properties['__ASTRO_IMAGE_'] = node.properties.src;
-						delete node.properties.src;
+						const { ...props } = node.properties;
+
+						// Initialize or increment occurrence count for this image
+						const index = imageOccurrenceMap.get(node.properties.src) || 0;
+						imageOccurrenceMap.set(node.properties.src, index + 1);
+
+						node.properties['__ASTRO_IMAGE_'] = JSON.stringify({ ...props, index });
+
+						Object.keys(props).forEach((prop) => {
+							delete node.properties[prop];
+						});
 					}
 				}
 			});
diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts
index 477ab2184b83..04b1bbcf6a72 100644
--- a/packages/markdown/remark/src/shiki.ts
+++ b/packages/markdown/remark/src/shiki.ts
@@ -1,4 +1,4 @@
-import { bundledLanguages, getHighlighter } from 'shikiji';
+import { bundledLanguages, createCssVariablesTheme, getHighlighter } from 'shikiji';
 import { visit } from 'unist-util-visit';
 import type { ShikiConfig } from './types.js';
 
@@ -6,32 +6,32 @@ export interface ShikiHighlighter {
 	highlight(code: string, lang?: string, options?: { inline?: boolean }): string;
 }
 
+// TODO: Remove this special replacement in Astro 5
 const ASTRO_COLOR_REPLACEMENTS: Record<string, string> = {
-	'#000001': 'var(--astro-code-color-text)',
-	'#000002': 'var(--astro-code-color-background)',
-	'#000004': 'var(--astro-code-token-constant)',
-	'#000005': 'var(--astro-code-token-string)',
-	'#000006': 'var(--astro-code-token-comment)',
-	'#000007': 'var(--astro-code-token-keyword)',
-	'#000008': 'var(--astro-code-token-parameter)',
-	'#000009': 'var(--astro-code-token-function)',
-	'#000010': 'var(--astro-code-token-string-expression)',
-	'#000011': 'var(--astro-code-token-punctuation)',
-	'#000012': 'var(--astro-code-token-link)',
+	'--astro-code-foreground': '--astro-code-color-text',
+	'--astro-code-background': '--astro-code-color-background',
 };
 const COLOR_REPLACEMENT_REGEX = new RegExp(
 	`(${Object.keys(ASTRO_COLOR_REPLACEMENTS).join('|')})`,
 	'g'
 );
 
+let _cssVariablesTheme: ReturnType<typeof createCssVariablesTheme>;
+const cssVariablesTheme = () =>
+	_cssVariablesTheme ??
+	(_cssVariablesTheme = createCssVariablesTheme({ variablePrefix: '--astro-code-' }));
+
 export async function createShikiHighlighter({
 	langs = [],
 	theme = 'github-dark',
 	experimentalThemes = {},
 	wrap = false,
+	transformers = [],
 }: ShikiConfig = {}): Promise<ShikiHighlighter> {
 	const themes = experimentalThemes;
 
+	theme = theme === 'css-variables' ? cssVariablesTheme() : theme;
+
 	const highlighter = await getHighlighter({
 		langs: langs.length ? langs : Object.keys(bundledLanguages),
 		themes: Object.values(themes).length ? Object.values(themes) : [theme],
@@ -53,74 +53,77 @@ export async function createShikiHighlighter({
 			return highlighter.codeToHtml(code, {
 				...themeOptions,
 				lang,
-				transforms: {
-					pre(node) {
-						// Swap to `code` tag if inline
-						if (inline) {
-							node.tagName = 'code';
-						}
-
-						// Cast to string as shikiji will always pass them as strings instead of any other types
-						const classValue = (node.properties.class as string) ?? '';
-						const styleValue = (node.properties.style as string) ?? '';
-
-						// Replace "shiki" class naming with "astro-code"
-						node.properties.class = classValue.replace(/shiki/g, 'astro-code');
-
-						// Handle code wrapping
-						// if wrap=null, do nothing.
-						if (wrap === false) {
-							node.properties.style = styleValue + '; overflow-x: auto;';
-						} else if (wrap === true) {
-							node.properties.style =
-								styleValue + '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;';
-						}
-					},
-					line(node) {
-						// Add "user-select: none;" for "+"/"-" diff symbols.
-						// Transform `<span class="line"><span style="...">+ something</span></span>
-						// into      `<span class="line"><span style="..."><span style="user-select: none;">+</span> something</span></span>`
-						if (lang === 'diff') {
-							const innerSpanNode = node.children[0];
-							const innerSpanTextNode =
-								innerSpanNode?.type === 'element' && innerSpanNode.children?.[0];
-
-							if (innerSpanTextNode && innerSpanTextNode.type === 'text') {
-								const start = innerSpanTextNode.value[0];
-								if (start === '+' || start === '-') {
-									innerSpanTextNode.value = innerSpanTextNode.value.slice(1);
-									innerSpanNode.children.unshift({
-										type: 'element',
-										tagName: 'span',
-										properties: { style: 'user-select: none;' },
-										children: [{ type: 'text', value: start }],
-									});
-								}
+				transformers: [
+					{
+						pre(node) {
+							// Swap to `code` tag if inline
+							if (inline) {
+								node.tagName = 'code';
 							}
-						}
-					},
-					code(node) {
-						if (inline) {
-							return node.children[0] as typeof node;
-						}
-					},
-					root(node) {
-						if (Object.values(experimentalThemes).length) {
-							return;
-						}
-
-						// theme.id for shiki -> shikiji compat
-						const themeName = typeof theme === 'string' ? theme : theme.name;
-						if (themeName === 'css-variables') {
-							// Replace special color tokens to CSS variables
-							visit(node as any, 'element', (child) => {
-								if (child.properties?.style) {
-									child.properties.style = replaceCssVariables(child.properties.style);
+
+							// Cast to string as shikiji will always pass them as strings instead of any other types
+							const classValue = (node.properties.class as string) ?? '';
+							const styleValue = (node.properties.style as string) ?? '';
+
+							// Replace "shiki" class naming with "astro-code"
+							node.properties.class = classValue.replace(/shiki/g, 'astro-code');
+
+							// Handle code wrapping
+							// if wrap=null, do nothing.
+							if (wrap === false) {
+								node.properties.style = styleValue + '; overflow-x: auto;';
+							} else if (wrap === true) {
+								node.properties.style =
+									styleValue + '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;';
+							}
+						},
+						line(node) {
+							// Add "user-select: none;" for "+"/"-" diff symbols.
+							// Transform `<span class="line"><span style="...">+ something</span></span>
+							// into      `<span class="line"><span style="..."><span style="user-select: none;">+</span> something</span></span>`
+							if (lang === 'diff') {
+								const innerSpanNode = node.children[0];
+								const innerSpanTextNode =
+									innerSpanNode?.type === 'element' && innerSpanNode.children?.[0];
+
+								if (innerSpanTextNode && innerSpanTextNode.type === 'text') {
+									const start = innerSpanTextNode.value[0];
+									if (start === '+' || start === '-') {
+										innerSpanTextNode.value = innerSpanTextNode.value.slice(1);
+										innerSpanNode.children.unshift({
+											type: 'element',
+											tagName: 'span',
+											properties: { style: 'user-select: none;' },
+											children: [{ type: 'text', value: start }],
+										});
+									}
 								}
-							});
-						}
+							}
+						},
+						code(node) {
+							if (inline) {
+								return node.children[0] as typeof node;
+							}
+						},
+						root(node) {
+							if (Object.values(experimentalThemes).length) {
+								return;
+							}
+
+							// theme.id for shiki -> shikiji compat
+							const themeName = typeof theme === 'string' ? theme : theme.name;
+							if (themeName === 'css-variables') {
+								// Replace special color tokens to CSS variables
+								visit(node as any, 'element', (child) => {
+									if (child.properties?.style) {
+										child.properties.style = replaceCssVariables(child.properties.style);
+									}
+								});
+							}
+						},
 					},
-				},
+					...transformers,
+				],
 			});
 		},
 	};
diff --git a/packages/markdown/remark/src/types.ts b/packages/markdown/remark/src/types.ts
index ab5af8ed134b..69e6d52009f7 100644
--- a/packages/markdown/remark/src/types.ts
+++ b/packages/markdown/remark/src/types.ts
@@ -4,6 +4,7 @@ import type { Options as RemarkRehypeOptions } from 'remark-rehype';
 import type {
 	BuiltinTheme,
 	LanguageRegistration,
+	ShikijiTransformer,
 	ThemeRegistration,
 	ThemeRegistrationRaw,
 } from 'shikiji';
@@ -32,11 +33,14 @@ export type RehypePlugins = (string | [string, any] | RehypePlugin | [RehypePlug
 
 export type RemarkRehype = RemarkRehypeOptions;
 
+export type ThemePresets = BuiltinTheme | 'css-variables';
+
 export interface ShikiConfig {
 	langs?: LanguageRegistration[];
-	theme?: BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw;
-	experimentalThemes?: Record<string, BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw>;
+	theme?: ThemePresets | ThemeRegistration | ThemeRegistrationRaw;
+	experimentalThemes?: Record<string, ThemePresets | ThemeRegistration | ThemeRegistrationRaw>;
 	wrap?: boolean | null;
+	transformers?: ShikijiTransformer[];
 }
 
 export interface AstroMarkdownOptions {
diff --git a/packages/markdown/remark/test/remark-collect-images.test.js b/packages/markdown/remark/test/remark-collect-images.test.js
index a5533695365f..259bea96e310 100644
--- a/packages/markdown/remark/test/remark-collect-images.test.js
+++ b/packages/markdown/remark/test/remark-collect-images.test.js
@@ -14,7 +14,9 @@ describe('collect images', async () => {
 
 		chai
 			.expect(code)
-			.to.equal('<p>Hello <img alt="inline image url" __ASTRO_IMAGE_="./img.png"></p>');
+			.to.equal(
+				'<p>Hello <img __ASTRO_IMAGE_="{&#x22;src&#x22;:&#x22;./img.png&#x22;,&#x22;alt&#x22;:&#x22;inline image url&#x22;,&#x22;index&#x22;:0}"></p>'
+			);
 
 		chai.expect(Array.from(imagePaths)).to.deep.equal(['./img.png']);
 	});
@@ -27,7 +29,11 @@ describe('collect images', async () => {
 			fileURL: 'file.md',
 		});
 
-		chai.expect(code).to.equal('<p>Hello <img alt="image ref" __ASTRO_IMAGE_="./img.webp"></p>');
+		chai
+			.expect(code)
+			.to.equal(
+				'<p>Hello <img __ASTRO_IMAGE_="{&#x22;src&#x22;:&#x22;./img.webp&#x22;,&#x22;alt&#x22;:&#x22;image ref&#x22;,&#x22;index&#x22;:0}"></p>'
+			);
 		chai.expect(Array.from(imagePaths)).to.deep.equal(['./img.webp']);
 	});
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a27e8015488d..d806241e5818 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -645,8 +645,8 @@ importers:
         specifier: ^1.0.1
         version: 1.0.1
       shikiji:
-        specifier: ^0.6.13
-        version: 0.6.13
+        specifier: ^0.9.18
+        version: 0.9.18
       string-width:
         specifier: ^7.0.0
         version: 7.0.0
@@ -808,6 +808,9 @@ importers:
       sass:
         specifier: ^1.69.5
         version: 1.69.6
+      shikiji-core:
+        specifier: ^0.9.18
+        version: 0.9.18
       srcset-parse:
         specifier: ^1.1.0
         version: 1.1.0
@@ -2520,6 +2523,12 @@ importers:
         specifier: workspace:*
         version: link:../../..
 
+  packages/astro/test/fixtures/core-image-remark-imgattr:
+    dependencies:
+      astro:
+        specifier: workspace:*
+        version: link:../../..
+
   packages/astro/test/fixtures/core-image-ssg:
     dependencies:
       astro:
@@ -3844,9 +3853,6 @@ importers:
       kleur:
         specifier: ^4.1.5
         version: 4.1.5
-      shikiji:
-        specifier: ^0.6.13
-        version: 0.6.13
       zod:
         specifier: ^3.22.4
         version: 3.22.4
@@ -5017,8 +5023,8 @@ importers:
         specifier: ^2.0.0
         version: 2.0.0
       shikiji:
-        specifier: ^0.6.13
-        version: 0.6.13
+        specifier: ^0.9.18
+        version: 0.9.18
       unified:
         specifier: ^11.0.4
         version: 11.0.4
@@ -14288,10 +14294,13 @@ packages:
       vscode-textmate: 5.2.0
     dev: true
 
-  /shikiji@0.6.13:
-    resolution: {integrity: sha512-4T7X39csvhT0p7GDnq9vysWddf2b6BeioiN3Ymhnt3xcy9tXmDcnsEFVxX18Z4YcQgEE/w48dLJ4pPPUcG9KkA==}
+  /shikiji-core@0.9.18:
+    resolution: {integrity: sha512-PKTXptbrp/WEDjNHV8OFG9KkfhmR0pSd161kzlDDlgQ0HXAnqJYNDSjqsy1CYZMx5bSvLMy42yJj9oFTqmkNTQ==}
+
+  /shikiji@0.9.18:
+    resolution: {integrity: sha512-/tFMIdV7UQklzN13VjF0/XFzmii6C606Jc878hNezvB8ZR8FG8FW9j0I4J9EJre0owlnPntgLVPpHqy27Gs+DQ==}
     dependencies:
-      hast-util-to-html: 9.0.0
+      shikiji-core: 0.9.18
     dev: false
 
   /side-channel@1.0.4: