diff --git a/.changeset/odd-buttons-pay.md b/.changeset/odd-buttons-pay.md new file mode 100644 index 0000000000..728068ef2a --- /dev/null +++ b/.changeset/odd-buttons-pay.md @@ -0,0 +1,22 @@ +--- +"astro": minor +--- + +Adds a new property `meta` to Astro's [built-in `` component](https://docs.astro.build/en/reference/api-reference/#code-). + +This allows you to provide a value for [Shiki's `meta` attribute](https://shiki.style/guide/transformers#meta) to pass options to transformers. + +The following example passes an option to highlight lines 1 and 3 to Shiki's `tranformerMetaHighlight`: + +```astro +--- +// src/components/Card.astro +import { Code } from "astro:components"; +import { transformerMetaHighlight } from '@shikijs/transformers'; +--- + +``` diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro index 0cc639d7d5..d1c019c60d 100644 --- a/packages/astro/components/Code.astro +++ b/packages/astro/components/Code.astro @@ -23,6 +23,13 @@ interface Props extends Omit, 'lang'> { * @default "plaintext" */ lang?: BuiltinLanguage | SpecialLanguage | LanguageRegistration; + /** + * A metastring to pass to the highlighter. + * Allows passing information to transformers: https://shiki.style/guide/transformers#meta + * + * @default undefined + */ + meta?: string; /** * The styling theme. * Supports all themes listed here: https://shiki.style/themes @@ -72,6 +79,7 @@ interface Props extends Omit, 'lang'> { const { code, lang = 'plaintext', + meta, theme = 'github-dark', themes = {}, defaultColor = 'light', @@ -110,6 +118,7 @@ const highlighter = await getCachedHighlighter({ const html = await highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, { inline, + meta, attributes: rest as any, }); ---