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

* 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>

Author: 5 people

.changeset/fluffy-carrots-search.md

@@ -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>
+```

packages/astro/components/Code.astro

@@ -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, {