Allow Code Component to have custom props and extra class styles

.changeset/calm-bags-deliver.md

@@ -0,0 +1,6 @@
+---
+"@astrojs/markdown-remark": minor
+"astro": minor
+---
+
+Allows passing any props to the `<Code />` component

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 {
@@ -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} />

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';