fix: code component was missing support for meta string (#11605)

* fix: code component was missing support for meta string

Fixed #11604

* Create odd-buttons-pay.md

* <Code>: add reference link for meta prop

* Apply suggestions from code review

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update .changeset/odd-buttons-pay.md

* Update .changeset/odd-buttons-pay.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

.changeset/odd-buttons-pay.md

@@ -0,0 +1,22 @@
+---
+"astro": minor
+---
+
+Adds a new property `meta` to Astro's [built-in `<Code />` 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';
+---
+<Code
+  code={code}
+  lang="js"
+  transformers={[transformerMetaHighlight()]}
+  meta="{1,3}" />
+```

packages/astro/components/Code.astro

@@ -23,6 +23,13 @@ interface Props extends Omit<HTMLAttributes<'pre'>, '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<HTMLAttributes<'pre'>, '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,
 });
 ---