diff options
| author |  Braden Wiggins <55504972+braebo@users.noreply.github.com>
| 2024-06-19 11:23:35 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2024-06-19 11:23:35 -0400 |
| commit | 4b46bd9bdcbb302f294aa27b8aa07099e104fa17 (patch) | |
| tree | 7b7102928d1e2a287022cd29c25e2c84c03e4135 | |
| parent | 5c56324c43b20e98454544036673b66761eebf1f (diff) | |
| download | astro-4b46bd9bdcbb302f294aa27b8aa07099e104fa17.tar.gz astro-4b46bd9bdcbb302f294aa27b8aa07099e104fa17.tar.zst astro-4b46bd9bdcbb302f294aa27b8aa07099e104fa17.zip | |
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>
| -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, { |