diff options
| -rw-r--r-- | .changeset/fluffy-carrots-search.md | 27 | ||||
| -rw-r--r-- | packages/astro/components/Code.astro | 9 |
2 files changed, 36 insertions, 0 deletions
diff --git a/.changeset/fluffy-carrots-search.md b/.changeset/fluffy-carrots-search.md new file mode 100644 index 000000000..79b7e7a3b --- /dev/null +++ b/.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> +``` diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro index f0cb26326..309cb6e65 100644 --- a/packages/astro/components/Code.astro +++ b/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, { |