From e24c9ffa0be211b93918302be3cc9893c4004320 Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Thu, 1 Feb 2024 20:25:31 -0500
Subject: [PATCH 01/19] Create simple react element if element has no children

---
 packages/integrations/react/client.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index cef488c83bc4..1b8d5be8337e 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -16,6 +16,11 @@ function createReactElementFromDOMElement(element) {
 		attrs[attr.name] = attr.value;
 	}
 
+	// If the element has no children, we can create a simple React element
+	if (element.children.length === 0) {
+		return createElement(element.localName, attrs);
+	}
+
 	return createElement(
 		element.localName,
 		attrs,

From 51b8e95601cb8289cf385c296f1eeabee157a86d Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Thu, 1 Feb 2024 20:38:15 -0500
Subject: [PATCH 02/19] Fix for when element has text

---
 packages/integrations/react/client.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index 1b8d5be8337e..90e4ceb837b5 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -15,9 +15,8 @@ function createReactElementFromDOMElement(element) {
 	for (const attr of element.attributes) {
 		attrs[attr.name] = attr.value;
 	}
-
 	// If the element has no children, we can create a simple React element
-	if (element.children.length === 0) {
+	if (element.firstChild === null) {
 		return createElement(element.localName, attrs);
 	}
 

From c0d456a747023b2640b6db2357447e61bf370b88 Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Fri, 2 Feb 2024 21:00:56 -0500
Subject: [PATCH 03/19] add changeset

---
 .changeset/metal-penguins-drum.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/metal-penguins-drum.md

diff --git a/.changeset/metal-penguins-drum.md b/.changeset/metal-penguins-drum.md
new file mode 100644
index 000000000000..deb59d4a96b1
--- /dev/null
+++ b/.changeset/metal-penguins-drum.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/react": minor
+---
+
+Fixes an issue where passing void elements (img, etc..) did not work with the `experimentalReactChildren` option enabled

From 5714a5c126aa3f7828e92266bf3baa6c5f3f32a2 Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Sat, 3 Feb 2024 00:56:09 -0500
Subject: [PATCH 04/19] Add additionalProps to Code component and
 ShikiHighlighter.highlight()

---
 packages/astro/components/Code.astro  |  7 ++++++-
 packages/markdown/remark/src/shiki.ts | 12 ++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 44d81b7144f1..2c64287b2fe5 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -9,6 +9,7 @@ import type {
 } from 'shikiji';
 import { bundledLanguages } from 'shikiji/langs';
 import { getCachedHighlighter } from '../dist/core/shiki.js';
+import type { HTMLAttributes } from '../types';
 
 interface Props {
 	/** The code to highlight. Required. */
@@ -49,6 +50,9 @@ interface Props {
 	 * @default false
 	 */
 	inline?: boolean;
+
+	/** Additional props to be spread to the code element. */
+	additionalProps?: HTMLAttributes<any>;
 }
 
 const {
@@ -58,6 +62,7 @@ const {
 	experimentalThemes = {},
 	wrap = false,
 	inline = false,
+	...additionalProps
 } = Astro.props;
 
 // shiki -> shikiji compat
@@ -87,7 +92,7 @@ const highlighter = await getCachedHighlighter({
 
 const html = highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, {
 	inline,
-});
+}, additionalProps);
 ---
 
 <Fragment set:html={html} />
diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts
index 492d5a821eb3..81a87bc82020 100644
--- a/packages/markdown/remark/src/shiki.ts
+++ b/packages/markdown/remark/src/shiki.ts
@@ -4,7 +4,7 @@ import type { Properties } from 'hast';
 import type { ShikiConfig } from './types.js';
 
 export interface ShikiHighlighter {
-	highlight(code: string, lang?: string, options?: { inline?: boolean }): string;
+	highlight(code: string, lang?: string, options?: { inline?: boolean }, additionalProps?:any): string;
 }
 
 // TODO: Remove this special replacement in Astro 5
@@ -41,7 +41,7 @@ export async function createShikiHighlighter({
 	const loadedLanguages = highlighter.getLoadedLanguages();
 
 	return {
-		highlight(code, lang = 'plaintext', options) {
+		highlight(code, lang = 'plaintext', options, additionalProps?:any) {
 			if (lang !== 'plaintext' && !loadedLanguages.includes(lang)) {
 				// eslint-disable-next-line no-console
 				console.warn(`[Shiki] The language "${lang}" doesn't exist, falling back to "plaintext".`);
@@ -57,6 +57,14 @@ export async function createShikiHighlighter({
 				transformers: [
 					{
 						pre(node) {
+							Object.entries(additionalProps).forEach(([key, value]) => {
+								if (key === 'class') {
+									node.properties[key] += ` ${value}`; // Append to class instead of replacing it
+								}
+								else {
+									node.properties[key] = value as string;
+								}
+							});
 							// Swap to `code` tag if inline
 							if (inline) {
 								node.tagName = 'code';

From a1d2531e2428111a1c91e15199cc453fd3d128df Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Sat, 3 Feb 2024 00:58:52 -0500
Subject: [PATCH 05/19] Add changeset

---
 .changeset/calm-bags-deliver.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/calm-bags-deliver.md

diff --git a/.changeset/calm-bags-deliver.md b/.changeset/calm-bags-deliver.md
new file mode 100644
index 000000000000..ad9250716d52
--- /dev/null
+++ b/.changeset/calm-bags-deliver.md
@@ -0,0 +1,6 @@
+---
+"@astrojs/markdown-remark": minor
+"astro": minor
+---
+
+Added functionality for additional props within the code component.

From 1a2b68f95b2d3db9e241bcea0adc2f472f8d0409 Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Thu, 1 Feb 2024 20:25:31 -0500
Subject: [PATCH 06/19] Create simple react element if element has no children

---
 packages/integrations/react/client.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index cef488c83bc4..1b8d5be8337e 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -16,6 +16,11 @@ function createReactElementFromDOMElement(element) {
 		attrs[attr.name] = attr.value;
 	}
 
+	// If the element has no children, we can create a simple React element
+	if (element.children.length === 0) {
+		return createElement(element.localName, attrs);
+	}
+
 	return createElement(
 		element.localName,
 		attrs,

From da2dd6f0ccd427a2d62026d39df5ae0bc8c86ee9 Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Thu, 1 Feb 2024 20:38:15 -0500
Subject: [PATCH 07/19] Fix for when element has text

---
 packages/integrations/react/client.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index 1b8d5be8337e..90e4ceb837b5 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -15,9 +15,8 @@ function createReactElementFromDOMElement(element) {
 	for (const attr of element.attributes) {
 		attrs[attr.name] = attr.value;
 	}
-
 	// If the element has no children, we can create a simple React element
-	if (element.children.length === 0) {
+	if (element.firstChild === null) {
 		return createElement(element.localName, attrs);
 	}
 

From fd2dda604ed20c4f7b29c8421aeba09ba1f9ad10 Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Fri, 2 Feb 2024 21:00:56 -0500
Subject: [PATCH 08/19] add changeset

---
 .changeset/metal-penguins-drum.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/metal-penguins-drum.md

diff --git a/.changeset/metal-penguins-drum.md b/.changeset/metal-penguins-drum.md
new file mode 100644
index 000000000000..deb59d4a96b1
--- /dev/null
+++ b/.changeset/metal-penguins-drum.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/react": minor
+---
+
+Fixes an issue where passing void elements (img, etc..) did not work with the `experimentalReactChildren` option enabled

From d2b73e079b70221e3455af2f2fb923c3c517a7ee Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Sat, 3 Feb 2024 00:56:09 -0500
Subject: [PATCH 09/19] Add additionalProps to Code component and
 ShikiHighlighter.highlight()

---
 packages/astro/components/Code.astro  |  7 ++++++-
 packages/markdown/remark/src/shiki.ts | 12 ++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 44d81b7144f1..2c64287b2fe5 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -9,6 +9,7 @@ import type {
 } from 'shikiji';
 import { bundledLanguages } from 'shikiji/langs';
 import { getCachedHighlighter } from '../dist/core/shiki.js';
+import type { HTMLAttributes } from '../types';
 
 interface Props {
 	/** The code to highlight. Required. */
@@ -49,6 +50,9 @@ interface Props {
 	 * @default false
 	 */
 	inline?: boolean;
+
+	/** Additional props to be spread to the code element. */
+	additionalProps?: HTMLAttributes<any>;
 }
 
 const {
@@ -58,6 +62,7 @@ const {
 	experimentalThemes = {},
 	wrap = false,
 	inline = false,
+	...additionalProps
 } = Astro.props;
 
 // shiki -> shikiji compat
@@ -87,7 +92,7 @@ const highlighter = await getCachedHighlighter({
 
 const html = highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, {
 	inline,
-});
+}, additionalProps);
 ---
 
 <Fragment set:html={html} />
diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts
index 492d5a821eb3..81a87bc82020 100644
--- a/packages/markdown/remark/src/shiki.ts
+++ b/packages/markdown/remark/src/shiki.ts
@@ -4,7 +4,7 @@ import type { Properties } from 'hast';
 import type { ShikiConfig } from './types.js';
 
 export interface ShikiHighlighter {
-	highlight(code: string, lang?: string, options?: { inline?: boolean }): string;
+	highlight(code: string, lang?: string, options?: { inline?: boolean }, additionalProps?:any): string;
 }
 
 // TODO: Remove this special replacement in Astro 5
@@ -41,7 +41,7 @@ export async function createShikiHighlighter({
 	const loadedLanguages = highlighter.getLoadedLanguages();
 
 	return {
-		highlight(code, lang = 'plaintext', options) {
+		highlight(code, lang = 'plaintext', options, additionalProps?:any) {
 			if (lang !== 'plaintext' && !loadedLanguages.includes(lang)) {
 				// eslint-disable-next-line no-console
 				console.warn(`[Shiki] The language "${lang}" doesn't exist, falling back to "plaintext".`);
@@ -57,6 +57,14 @@ export async function createShikiHighlighter({
 				transformers: [
 					{
 						pre(node) {
+							Object.entries(additionalProps).forEach(([key, value]) => {
+								if (key === 'class') {
+									node.properties[key] += ` ${value}`; // Append to class instead of replacing it
+								}
+								else {
+									node.properties[key] = value as string;
+								}
+							});
 							// Swap to `code` tag if inline
 							if (inline) {
 								node.tagName = 'code';

From 7ee9553494dadc16b64220f765dd724d862b6629 Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Sat, 3 Feb 2024 00:58:52 -0500
Subject: [PATCH 10/19] Add changeset

---
 .changeset/calm-bags-deliver.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/calm-bags-deliver.md

diff --git a/.changeset/calm-bags-deliver.md b/.changeset/calm-bags-deliver.md
new file mode 100644
index 000000000000..ad9250716d52
--- /dev/null
+++ b/.changeset/calm-bags-deliver.md
@@ -0,0 +1,6 @@
+---
+"@astrojs/markdown-remark": minor
+"astro": minor
+---
+
+Added functionality for additional props within the code component.

From 27c6dd1f6fd91b776a72f4e71e5ebeeef2293dd7 Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Sat, 3 Feb 2024 01:11:47 -0500
Subject: [PATCH 11/19] reverted accidental changes

---
 .changeset/metal-penguins-drum.md     | 5 -----
 packages/integrations/react/client.js | 4 ----
 2 files changed, 9 deletions(-)
 delete mode 100644 .changeset/metal-penguins-drum.md

diff --git a/.changeset/metal-penguins-drum.md b/.changeset/metal-penguins-drum.md
deleted file mode 100644
index deb59d4a96b1..000000000000
--- a/.changeset/metal-penguins-drum.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@astrojs/react": minor
----
-
-Fixes an issue where passing void elements (img, etc..) did not work with the `experimentalReactChildren` option enabled
diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index 90e4ceb837b5..cef488c83bc4 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -15,10 +15,6 @@ function createReactElementFromDOMElement(element) {
 	for (const attr of element.attributes) {
 		attrs[attr.name] = attr.value;
 	}
-	// If the element has no children, we can create a simple React element
-	if (element.firstChild === null) {
-		return createElement(element.localName, attrs);
-	}
 
 	return createElement(
 		element.localName,

From bd8e2c06d8b83e1ddbe2f608a2b403b52562d34e Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Sat, 3 Feb 2024 01:50:16 -0500
Subject: [PATCH 12/19] remove unnecessary parts

---
 packages/astro/components/Code.astro | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 2c64287b2fe5..a4adb6cb68c3 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -9,7 +9,6 @@ import type {
 } from 'shikiji';
 import { bundledLanguages } from 'shikiji/langs';
 import { getCachedHighlighter } from '../dist/core/shiki.js';
-import type { HTMLAttributes } from '../types';
 
 interface Props {
 	/** The code to highlight. Required. */
@@ -50,9 +49,6 @@ interface Props {
 	 * @default false
 	 */
 	inline?: boolean;
-
-	/** Additional props to be spread to the code element. */
-	additionalProps?: HTMLAttributes<any>;
 }
 
 const {

From 9bfc65bd4c7601d1b1865e6b3fb265020485922b Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Sat, 3 Feb 2024 17:06:11 -0500
Subject: [PATCH 13/19] Add HTMLAttributes type to additionalProps

---
 packages/astro/components/Code.astro | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index a4adb6cb68c3..2e750b4d1cf1 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -9,6 +9,7 @@ import type {
 } from 'shikiji';
 import { bundledLanguages } from 'shikiji/langs';
 import { getCachedHighlighter } from '../dist/core/shiki.js';
+import type { HTMLAttributes } from '../types';
 
 interface Props {
 	/** The code to highlight. Required. */
@@ -49,6 +50,9 @@ interface Props {
 	 * @default false
 	 */
 	inline?: boolean;
+
+	/** Additional props to pass to the pre element. */
+	additionalProps?: HTMLAttributes<any>;
 }
 
 const {

From ada412601a7b99332fa11f68961b9cfc16dce9ce Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Sat, 3 Feb 2024 17:06:52 -0500
Subject: [PATCH 14/19] Update .changeset/calm-bags-deliver.md

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
---
 .changeset/calm-bags-deliver.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/calm-bags-deliver.md b/.changeset/calm-bags-deliver.md
index ad9250716d52..8cb125d60ee7 100644
--- a/.changeset/calm-bags-deliver.md
+++ b/.changeset/calm-bags-deliver.md
@@ -3,4 +3,4 @@
 "astro": minor
 ---
 
-Added functionality for additional props within the code component.
+Allows passing any props to the `<Code />` component

From e6b100c6df4df125e9b4dc72629ca375e6947cd1 Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Sun, 4 Feb 2024 15:51:58 -0500
Subject: [PATCH 15/19] extend HTMLAtts instead

---
 packages/astro/components/Code.astro | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 2e750b4d1cf1..352e9d64de84 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -11,7 +11,8 @@ import { bundledLanguages } from 'shikiji/langs';
 import { getCachedHighlighter } from '../dist/core/shiki.js';
 import type { HTMLAttributes } from '../types';
 
-interface Props {
+interface Props extends HTMLAttributes<'pre'> {
+	
 	/** The code to highlight. Required. */
 	code: string;
 	/**
@@ -21,7 +22,7 @@ interface Props {
 	 *
 	 * @default "plaintext"
 	 */
-	lang?: BuiltinLanguage | SpecialLanguage | LanguageRegistration;
+	lang?: BuiltinLanguage | SpecialLanguage // | LanguageRegistration;
 	/**
 	 * The styling theme.
 	 * Supports all themes listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
@@ -50,9 +51,6 @@ interface Props {
 	 * @default false
 	 */
 	inline?: boolean;
-
-	/** Additional props to pass to the pre element. */
-	additionalProps?: HTMLAttributes<any>;
 }
 
 const {

From 45d14c7869ed2e7ed4575d7bf0c8f36e772c9db6 Mon Sep 17 00:00:00 2001
From: StandardGage <50509562+StandardGage@users.noreply.github.com>
Date: Sun, 4 Feb 2024 22:25:04 -0500
Subject: [PATCH 16/19] add suggestions

---
 packages/markdown/remark/src/shiki.ts | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts
index 81a87bc82020..79ec9cef422a 100644
--- a/packages/markdown/remark/src/shiki.ts
+++ b/packages/markdown/remark/src/shiki.ts
@@ -2,9 +2,10 @@ import { bundledLanguages, createCssVariablesTheme, getHighlighter } from 'shiki
 import { visit } from 'unist-util-visit';
 import type { Properties } from 'hast';
 import type { ShikiConfig } from './types.js';
+import type { HTMLAttributes } from '../../../../packages/astro/types.js';
 
 export interface ShikiHighlighter {
-	highlight(code: string, lang?: string, options?: { inline?: boolean }, additionalProps?:any): string;
+	highlight(code: string, lang?: string, options?: { inline?: boolean }, additionalProps?:HTMLAttributes<'pre'>): string;
 }
 
 // TODO: Remove this special replacement in Astro 5
@@ -41,7 +42,7 @@ export async function createShikiHighlighter({
 	const loadedLanguages = highlighter.getLoadedLanguages();
 
 	return {
-		highlight(code, lang = 'plaintext', options, additionalProps?:any) {
+		highlight(code, lang = 'plaintext', options, additionalProps?:HTMLAttributes<'pre'>) {
 			if (lang !== 'plaintext' && !loadedLanguages.includes(lang)) {
 				// eslint-disable-next-line no-console
 				console.warn(`[Shiki] The language "${lang}" doesn't exist, falling back to "plaintext".`);
@@ -57,14 +58,15 @@ export async function createShikiHighlighter({
 				transformers: [
 					{
 						pre(node) {
-							Object.entries(additionalProps).forEach(([key, value]) => {
-								if (key === 'class') {
-									node.properties[key] += ` ${value}`; // Append to class instead of replacing it
-								}
-								else {
-									node.properties[key] = value as string;
-								}
-							});
+							if (additionalProps) {
+								Object.entries(additionalProps).forEach(([key, value]) => {
+									if (key === 'class') {
+										node.properties[key] += ` ${value}`; // Append to class instead of replacing it
+									} else {
+										node.properties[key] = value as string;
+									}
+								});
+							}
 							// Swap to `code` tag if inline
 							if (inline) {
 								node.tagName = 'code';

From 1a5c155dbe02800e1b6b6fa4ac40800fa2a73f2e Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 26 Feb 2024 15:51:15 +0100
Subject: [PATCH 17/19] feat: address reviews

---
 packages/astro/components/Code.astro  |  8 +++----
 packages/markdown/remark/src/shiki.ts | 30 ++++++++++++++-------------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 352e9d64de84..26565ec56fa6 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -11,7 +11,7 @@ import { bundledLanguages } from 'shikiji/langs';
 import { getCachedHighlighter } from '../dist/core/shiki.js';
 import type { HTMLAttributes } from '../types';
 
-interface Props extends HTMLAttributes<'pre'> {
+interface Props extends Omit<HTMLAttributes<'pre'>, 'lang'> {
 	
 	/** The code to highlight. Required. */
 	code: string;
@@ -22,7 +22,7 @@ interface Props extends HTMLAttributes<'pre'> {
 	 *
 	 * @default "plaintext"
 	 */
-	lang?: BuiltinLanguage | SpecialLanguage // | LanguageRegistration;
+	lang?: BuiltinLanguage | SpecialLanguage | LanguageRegistration;
 	/**
 	 * The styling theme.
 	 * Supports all themes listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
@@ -60,7 +60,7 @@ const {
 	experimentalThemes = {},
 	wrap = false,
 	inline = false,
-	...additionalProps
+	...rest
 } = Astro.props;
 
 // shiki -> shikiji compat
@@ -90,7 +90,7 @@ const highlighter = await getCachedHighlighter({
 
 const html = highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, {
 	inline,
-}, additionalProps);
+}, rest);
 ---
 
 <Fragment set:html={html} />
diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts
index 0b1a77fed877..3437498162fc 100644
--- a/packages/markdown/remark/src/shiki.ts
+++ b/packages/markdown/remark/src/shiki.ts
@@ -2,10 +2,14 @@ import { bundledLanguages, createCssVariablesTheme, getHighlighter } from 'shiki
 import { visit } from 'unist-util-visit';
 import type { Properties } from 'hast';
 import type { ShikiConfig } from './types.js';
-import type { HTMLAttributes } from '../../../../packages/astro/types.js';
 
 export interface ShikiHighlighter {
-	highlight(code: string, lang?: string, options?: { inline?: boolean }, additionalProps?:HTMLAttributes<'pre'>): string;
+	highlight(
+		code: string,
+		lang?: string,
+		options?: { inline?: boolean },
+		attributes?: Record<string, string>
+	): string;
 }
 
 // TODO: Remove this special replacement in Astro 5
@@ -42,7 +46,7 @@ export async function createShikiHighlighter({
 	const loadedLanguages = highlighter.getLoadedLanguages();
 
 	return {
-		highlight(code, lang = 'plaintext', options, additionalProps?:HTMLAttributes<'pre'>) {
+		highlight(code, lang = 'plaintext', options, attributes) {
 			if (lang !== 'plaintext' && !loadedLanguages.includes(lang)) {
 				// eslint-disable-next-line no-console
 				console.warn(`[Shiki] The language "${lang}" doesn't exist, falling back to "plaintext".`);
@@ -58,22 +62,20 @@ export async function createShikiHighlighter({
 				transformers: [
 					{
 						pre(node) {
-							if (additionalProps) {
-								Object.entries(additionalProps).forEach(([key, value]) => {
-									if (key === 'class') {
-										node.properties[key] += ` ${value}`; // Append to class instead of replacing it
-									} else {
-										node.properties[key] = value as string;
-									}
-								});
-							}
 							// Swap to `code` tag if inline
 							if (inline) {
 								node.tagName = 'code';
 							}
 
-							const classValue = normalizePropAsString(node.properties.class) ?? '';
-							const styleValue = normalizePropAsString(node.properties.style) ?? '';
+							const { class: attributesClass, style: attributesStyle, ...rest } = attributes ?? {};
+							Object.assign(node.properties, rest);
+
+							const classValue =
+								(normalizePropAsString(node.properties.class) ?? '') +
+								(attributesClass ? ` ${attributesClass}` : '');
+							const styleValue =
+								(normalizePropAsString(node.properties.style) ?? '') +
+								(attributesStyle ? `; ${attributesStyle}` : '');
 
 							// Replace "shiki" class naming with "astro-code"
 							node.properties.class = classValue.replace(/shiki/g, 'astro-code');

From 9c7323c3e7d22b0e14ff9510f4e9eaef5bac823a Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 26 Feb 2024 15:52:15 +0100
Subject: [PATCH 18/19] chore: remove empty line

---
 packages/astro/components/Code.astro | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 26565ec56fa6..cea32b457658 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -12,7 +12,6 @@ import { getCachedHighlighter } from '../dist/core/shiki.js';
 import type { HTMLAttributes } from '../types';
 
 interface Props extends Omit<HTMLAttributes<'pre'>, 'lang'> {
-	
 	/** The code to highlight. Required. */
 	code: string;
 	/**

From beb178626f18cd60c46651cdb3f858bd237f086b Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Mon, 26 Feb 2024 17:28:37 +0100
Subject: [PATCH 19/19] feat: move attributes to options

---
 packages/astro/components/Code.astro  | 3 ++-
 packages/markdown/remark/src/shiki.ts | 7 +++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index cea32b457658..62f125f9d559 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -89,7 +89,8 @@ const highlighter = await getCachedHighlighter({
 
 const html = highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, {
 	inline,
-}, rest);
+	attributes: rest,
+});
 ---
 
 <Fragment set:html={html} />
diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts
index 3437498162fc..df48606a7fe9 100644
--- a/packages/markdown/remark/src/shiki.ts
+++ b/packages/markdown/remark/src/shiki.ts
@@ -7,8 +7,7 @@ export interface ShikiHighlighter {
 	highlight(
 		code: string,
 		lang?: string,
-		options?: { inline?: boolean },
-		attributes?: Record<string, string>
+		options?: { inline?: boolean; attributes?: Record<string, string> }
 	): string;
 }
 
@@ -46,7 +45,7 @@ export async function createShikiHighlighter({
 	const loadedLanguages = highlighter.getLoadedLanguages();
 
 	return {
-		highlight(code, lang = 'plaintext', options, attributes) {
+		highlight(code, lang = 'plaintext', options) {
 			if (lang !== 'plaintext' && !loadedLanguages.includes(lang)) {
 				// eslint-disable-next-line no-console
 				console.warn(`[Shiki] The language "${lang}" doesn't exist, falling back to "plaintext".`);
@@ -67,7 +66,7 @@ export async function createShikiHighlighter({
 								node.tagName = 'code';
 							}
 
-							const { class: attributesClass, style: attributesStyle, ...rest } = attributes ?? {};
+							const { class: attributesClass, style: attributesStyle, ...rest } = options?.attributes ?? {};
 							Object.assign(node.properties, rest);
 
 							const classValue =