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