From d3d99fba269da9e812e748539a11dfed785ef8a4 Mon Sep 17 00:00:00 2001
From: Julien Cayzac <jcayzac@users.noreply.github.com>
Date: Wed, 14 Aug 2024 19:04:36 +0900
Subject: [PATCH] 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        | 22 ++++++++++++++++++++++
 packages/astro/components/Code.astro |  9 +++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 .changeset/odd-buttons-pay.md

diff --git a/.changeset/odd-buttons-pay.md b/.changeset/odd-buttons-pay.md
new file mode 100644
index 000000000000..728068ef2a5f
--- /dev/null
+++ b/.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}" />
+```
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 0cc639d7d577..d1c019c60d1b 100644
--- a/packages/astro/components/Code.astro
+++ b/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,
 });
 ---