Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-27 22:19:04 -05:00
Code Issues Activity

feat: add ShikiTransformer support to the <Code /> component (#11197)

Browse source 
* feat: add `transformers` prop to `<Code />` component

* chore: changeset

* Update .changeset/fluffy-carrots-search.md

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

* chore: add example

* fix: changelog example typo

Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com>

* fix: change backdrop-filter to filter

Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com>

* Update .changeset/fluffy-carrots-search.md

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

---------

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com>
Co-authored-by: Matthew Phillips <matthew@matthewphillips.info>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
Braden Wiggins 2024-06-19 11:23:35 -04:00 • committed by GitHub
parent 5c56324c43
commit 4b46bd9bdc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 36 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
.changeset/fluffy-carrots-search.md Normal file
View file

@ -0,0 +1,27 @@
---
'astro': minor
---
Adds [`ShikiTransformer`](https://shiki.style/packages/transformers#shikijs-transformers) support to the [`<Code />`](https://docs.astro.build/en/reference/api-reference/#code-) component with a new `transformers` prop.
Note that `transformers` only applies classes and you must provide your own CSS rules to target the elements of your code block.
```astro
---
import { transformerNotationFocus } from '@shikijs/transformers'
import { Code } from 'astro:components'
const code = `const foo = 'hello'
const bar = ' world'
console.log(foo + bar) // [!code focus]
`
---
<Code {code} lang="js" transformers={[transformerNotationFocus()]} />
<style is:global>
pre.has-focused .line:not(.focused) {
filter: blur(1px);
}
</style>
```

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

@ -6,6 +6,7 @@ import type {
SpecialLanguage,
ThemeRegistration,
ThemeRegistrationRaw,
ShikiTransformer,
} from 'shiki';
import { bundledLanguages } from 'shiki/langs';
import { getCachedHighlighter } from '../dist/core/shiki.js';
@ -50,6 +51,12 @@ interface Props extends Omit<HTMLAttributes<'pre'>, 'lang'> {
* @default false
*/
inline?: boolean;
/**
* Shiki transformers to customize the generated HTML by manipulating the hast tree.
* Supports all transformers listed here: https://shiki.style/packages/transformers#transformers
* Instructions for custom transformers: https://shiki.style/guide/transformers
*/
transformers?: ShikiTransformer[];
}
const {
@ -59,6 +66,7 @@ const {
themes = {},
wrap = false,
inline = false,
transformers = [],
...rest
} = Astro.props;
@ -85,6 +93,7 @@ const highlighter = await getCachedHighlighter({
theme,
themes,
wrap,
transformers,
});
const html = await highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, {