diff options
| -rw-r--r-- | .changeset/odd-buttons-pay.md | 22 | ||||
| -rw-r--r-- | packages/astro/components/Code.astro | 9 |
2 files changed, 31 insertions, 0 deletions
diff --git a/.changeset/odd-buttons-pay.md b/.changeset/odd-buttons-pay.md new file mode 100644 index 000000000..728068ef2 --- /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 0cc639d7d..d1c019c60 100644 --- a/packages/astro/components/Code.astro +++ b/packages/astro/components/Code.astro @@ -24,6 +24,13 @@ interface Props extends Omit<HTMLAttributes<'pre'>, 'lang'> { */ 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 * Instructions for loading a custom theme: https://shiki.style/guide/load-theme @@ -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, }); --- |