diff --git a/.changeset/calm-bags-deliver.md b/.changeset/calm-bags-deliver.md
new file mode 100644
index 000000000000..8cb125d60ee7
--- /dev/null
+++ b/.changeset/calm-bags-deliver.md
@@ -0,0 +1,6 @@
+---
+"@astrojs/markdown-remark": minor
+"astro": minor
+---
+
+Allows passing any props to the `
` component
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index a7f6f725aeec..98047b5b8ea5 100644
--- a/packages/astro/components/Code.astro
+++ b/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, '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,
});
---
diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts
index c0fc798e9830..2e7bce24d0d7 100644
--- a/packages/markdown/remark/src/shiki.ts
+++ b/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;
}
// 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');