mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
4b46bd9bdc
* 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>
765 B
765 B
| astro |
|---|
| minor |
Adds ShikiTransformer support to the <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.
---
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>