Localize Code Block copy feature

[mtdvlpr]

Is your feature request related to a problem? Please describe.

I want to be able to localize the Code Block feature.

Describe the solution you'd like

I've found an option to overwrite the copy button tooltip, but it's not present in the LocaleConfig<ThemeConfig> type, so I can't overwrite it per locale. I couldn't find an existing option to overwrite the "Copied" text. I would like to be able to overwrite both strings per locale.

Describe alternatives you've considered

No response

Additional context

Existing option to overwrite the copy button tooltip:

vitepress/src/node/markdown/markdown.ts

Lines 113 to 117 in 730fc08

	/**
	* The tooltip text for the copy button in code blocks
	* @default 'Copy Code'
	*/
	codeCopyButtonTitle?: string

Strings to overwrite:

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[Yuan-ZW]

#4074 (comment)

[mtdvlpr]

I've managed to translate the "Copied" text, but I still can't overwrite the "Copy Code" label per locale

[brc-dd]

Ah #4074 is different. It customizes that Copied thing not the "Copy Code" tooltip. This is more related to #3861. One can probably hack around using localeIndex from md env, but it's not trivial.

[mtdvlpr]

Ah #4074 is different. It customizes that Copied thing not the "Copy Code" tooltip. This is more related to #3861. One can probably hack around using localeIndex from md env, but it's not trivial.

What I've tried so far is to add a script in the head of each locale that queries all button.copy elements and overwrites the title attribute to a localized string. But it needs to wait for the window to have finished loading and then it only executes when directly landing on the page with code blocks or refreshing it, but not when navigating to a page with code blocks.

[mtdvlpr]

I also considered the transformHtml hook, but it warns about hydration problems in runtime.

[brc-dd]

    config(md) {
      const fence = md.renderer.rules.fence!
      md.renderer.rules.fence = function (tokens, idx, options, env, self) {
        const { localeIndex = 'root' } = env
        const codeCopyButtonTitle = (() => {
          switch (localeIndex) {
            case 'es':
              return 'Copiar código'
            case 'fa':
              return 'کپی کد'
            case 'ko':
              return '코드 복사'
            case 'pt':
              return 'Copiar código'
            case 'ru':
              return 'Скопировать код'
            case 'zh':
              return '复制代码'
            default:
              return 'Copy code'
          }
        })()
        return fence(tokens, idx, options, env, self).replace(
          '<button title="Copy Code" class="copy"></button>',
          `<button title="${codeCopyButtonTitle}" class="copy"></button>`
        )
      }
    }

[mtdvlpr]

    config(md) {
      const fence = md.renderer.rules.fence!
      md.renderer.rules.fence = function (tokens, idx, options, env, self) {
        const { localeIndex = 'root' } = env
        const codeCopyButtonTitle = (() => {
          switch (localeIndex) {
            case 'es':
              return 'Copiar código'
            case 'fa':
              return 'کپی کد'
            case 'ko':
              return '코드 복사'
            case 'pt':
              return 'Copiar código'
            case 'ru':
              return 'Скопировать код'
            case 'zh':
              return '复制代码'
            default:
              return 'Copy code'
          }
        })()
        return fence(tokens, idx, options, env, self).replace(
          '<button title="Copy Code" class="copy"></button>',
          `<button title="${codeCopyButtonTitle}" class="copy"></button>`
        )
      }
    }

This works! Thank you for the help! It would be nice to have this logic built-in, so that I only have to provide the localized string in my config and above logic is handled by VitePress.