From ed6ada7a688c466920f3e0ef33b7176b8eb01eee Mon Sep 17 00:00:00 2001 From: Nozomu Ikuta <16436160+NozomuIkuta@users.noreply.github.com> Date: Fri, 3 May 2024 05:16:12 +0900 Subject: [PATCH] feat(build/i18n): support customizing copy code button's tooltip text (#3854) Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> --- src/node/markdown/markdown.ts | 10 ++++++++-- src/node/markdown/plugins/preWrapper.ts | 13 +++++++++---- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts index fb5d0e29..bc1c3898 100644 --- a/src/node/markdown/markdown.ts +++ b/src/node/markdown/markdown.ts @@ -111,6 +111,11 @@ export interface MarkdownOptions extends Options { * Setup Shiki instance */ shikiSetup?: (shiki: Highlighter) => void | Promise + /** + * The tooltip text for the copy button in code blocks + * @default 'Copy Code' + */ + codeCopyButtonTitle?: string /* ==================== Markdown It Plugins ==================== */ @@ -195,6 +200,7 @@ export const createMarkdownRenderer = async ( logger: Pick = console ): Promise => { const theme = options.theme ?? { light: 'github-light', dark: 'github-dark' } + const codeCopyButtonTitle = options.codeCopyButtonTitle || 'Copy Code' const hasSingleTheme = typeof theme === 'string' || 'name' in theme const md = MarkdownIt({ @@ -214,7 +220,7 @@ export const createMarkdownRenderer = async ( // custom plugins md.use(componentPlugin, { ...options.component }) .use(highlightLinePlugin) - .use(preWrapperPlugin, { hasSingleTheme }) + .use(preWrapperPlugin, { codeCopyButtonTitle, hasSingleTheme }) .use(snippetPlugin, srcDir) .use(containerPlugin, { hasSingleTheme }, options.container) .use(imagePlugin, options.image) @@ -229,7 +235,7 @@ export const createMarkdownRenderer = async ( md.use(gitHubAlertsPlugin) } - // 3rd party plugins + // third party plugins if (!options.attrs?.disable) { md.use(attrsPlugin, options.attrs) } diff --git a/src/node/markdown/plugins/preWrapper.ts b/src/node/markdown/plugins/preWrapper.ts index 9e79a4e1..906cac2a 100644 --- a/src/node/markdown/plugins/preWrapper.ts +++ b/src/node/markdown/plugins/preWrapper.ts @@ -1,6 +1,7 @@ import type MarkdownIt from 'markdown-it' export interface Options { + codeCopyButtonTitle: string hasSingleTheme: boolean } @@ -17,10 +18,14 @@ export function preWrapperPlugin(md: MarkdownIt, options: Options) { token.info = token.info.replace(/ active$/, '').replace(/ active /, ' ') const lang = extractLang(token.info) - const rawCode = fence(...args) - return `
${lang}${rawCode}
` + + return ( + `
` + + `` + + `${lang}` + + fence(...args) + + '
' + ) } }