Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

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

Browse source 
* 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>
This commit is contained in:
Julien Cayzac 2024-08-14 19:04:36 +09:00 committed by GitHub
parent 3fb927d7ae
commit d3d99fba26
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
.changeset/odd-buttons-pay.md Normal file
View file

@ -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}" />
```

9
packages/astro/components/Code.astro
View file

@ -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,
});
---