How to change the copy button text?

[Horace Liu]

how can I modify the inner text of the copy button(tips, copied...)?

this

and

[Hippo]

Hello! Sorry about that, I forgot to add this to the documentation. Will add it!

Here's how it works. In your config file (e.g. astro.config.mjs), you add the following:

import { pluginFramesTexts } from '@expressive-code/plugin-frames'

// This is how you override the texts of an existing language:
pluginFramesTexts.overrideTexts('en', {
  terminalWindowFallbackTitle: 'My terminal window',
  copyButtonTooltip: 'My copy to clipboard tooltip',
  copyButtonCopied: 'My copied text!',
})

// This is how you add translations for a new language locale
// (note that "de" is already present, this just shows how it works):
pluginFramesTexts.addLocale('de', {
  terminalWindowFallbackTitle: 'Terminal-Fenster',
  copyButtonTooltip: 'In die Zwischenablage kopieren',
  copyButtonCopied: 'Kopiert!',
})

If your package manager is strict about the dependencies and does not allow importing @expressive-code/plugin-frames right away, you may need to add @expressive-code/plugin-frames as a dependency to your project.

[Hippo]

Another note: If you are a Starlight user, you can use Starlight's own i18n files as documented here: https://starlight.astro.build/guides/i18n/#translate-starlights-ui

[Horace Liu]

Hello! Sorry about that, I forgot to add this to the documentation. Will add it!

Here's how it works. In your config file (e.g. astro.config.mjs), you add the following:

import { pluginFramesTexts } from '@expressive-code/plugin-frames'

// This is how you override the texts of an existing language:
pluginFramesTexts.overrideTexts('en', {
  terminalWindowFallbackTitle: 'My terminal window',
  copyButtonTooltip: 'My copy to clipboard tooltip',
  copyButtonCopied: 'My copied text!',
})

// This is how you add translations for a new language locale
// (note that "de" is already present, this just shows how it works):
pluginFramesTexts.addLocale('de', {
  terminalWindowFallbackTitle: 'Terminal-Fenster',
  copyButtonTooltip: 'In die Zwischenablage kopieren',
  copyButtonCopied: 'Kopiert!',
})

If your package manager is strict about the dependencies and does not allow importing @expressive-code/plugin-frames right away, you may need to add @expressive-code/plugin-frames as a dependency to your project.

Thank you very much! It worked fine.