mirror of
https://github.com/withastro/astro.git
synced 2025-02-03 22:29:08 -05:00
28 lines
765 B
Markdown
28 lines
765 B
Markdown
|
---
|
||
|
|
'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>
|
||
|
|
```
|