diff options
| author |  Julien Cayzac <jcayzac@users.noreply.github.com>
| 2024-08-14 19:04:36 +0900 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2024-08-14 11:04:36 +0100 |
| commit | d3d99fba269da9e812e748539a11dfed785ef8a4 (patch) | |
| tree | f28f45b27e432ed3a995f978d25a4483e7ef14c9 | |
| parent | 3fb927d7aecc2b58da64cc87bfc7802f28e302c8 (diff) | |
| download | astro-d3d99fba269da9e812e748539a11dfed785ef8a4.tar.gz astro-d3d99fba269da9e812e748539a11dfed785ef8a4.tar.zst astro-d3d99fba269da9e812e748539a11dfed785ef8a4.zip | |
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>
| -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, }); --- |