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,8 +9,9 @@ import type {
 } from 'shiki';
 import { bundledLanguages } from 'shiki/langs';
 import { getCachedHighlighter } from '../dist/core/shiki.js';
+import type { HTMLAttributes } from '../types';
 
-interface Props {
+interface Props extends Omit<HTMLAttributes<'pre'>, 'lang'> {
 	/** The code to highlight. Required. */
 	code: string;
 	/**
@@ -58,6 +59,7 @@ const {
 	themes = {},
 	wrap = false,
 	inline = false,
+	...rest
 } = Astro.props;
 
 // shiki 1.0 compat
@@ -87,6 +89,7 @@ const highlighter = await getCachedHighlighter({
 
 const html = highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, {
 	inline,
+	attributes: rest,
 });
 ---
 

packages/markdown/remark/src/shiki.ts

@@ -4,7 +4,11 @@ import { visit } from 'unist-util-visit';
 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; attributes?: Record<string, string> }
+	): string;
 }
 
 // TODO: Remove this special replacement in Astro 5
@@ -60,8 +64,15 @@ export async function createShikiHighlighter({
 								node.tagName = 'code';
 							}
 
-							const classValue = normalizePropAsString(node.properties.class) ?? '';
-							const styleValue = normalizePropAsString(node.properties.style) ?? '';
+							const { class: attributesClass, style: attributesStyle, ...rest } = options?.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');