diff --git a/tests/e2e/mermaid.test.ts b/tests/e2e/mermaid.test.ts
index 1523577eaa7..335220de36a 100644
--- a/tests/e2e/mermaid.test.ts
+++ b/tests/e2e/mermaid.test.ts
@@ -13,5 +13,9 @@ test('mermaid diagram in issue', async ({page, request}) => {
   const svg = page.frameLocator('iframe.markup-content-iframe').locator('svg');
   await expect(svg).toContainText(/Alpha[\s\S]*Beta[\s\S]*Gamma/);
 
+  await svg.hover();
+  await page.locator('.code-copy').click();
+  await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('flowchart LR\n  Alpha --> Beta\n  Beta --> Gamma');
+
   await assertNoJsError(page);
 });
diff --git a/web_src/js/markup/codecopy.ts b/web_src/js/markup/codecopy.ts
index 3e373f62a22..00e6306cdc8 100644
--- a/web_src/js/markup/codecopy.ts
+++ b/web_src/js/markup/codecopy.ts
@@ -1,5 +1,6 @@
 import {svg} from '../svg.ts';
-import {createElementFromAttrs, generateElemId, queryElems} from '../utils/dom.ts';
+import {createElementFromAttrs, queryElems} from '../utils/dom.ts';
+import {copyToClipboardWithFeedback} from '../modules/clipboard.ts';
 
 export function makeCodeCopyButton(attrs: Record<string, string> = {}): HTMLButtonElement {
   const btn = createElementFromAttrs<HTMLButtonElement>('button', {
@@ -14,9 +15,9 @@ export function makeCodeCopyButton(attrs: Record<string, string> = {}): HTMLButt
 export function initMarkupCodeCopy(elMarkup: HTMLElement): void {
   queryElems(elMarkup, '.code-block code', (el) => {
     // the code block's content can change (e.g.: debian package page: select different distributions),
-    // so use "data-clipboard-target" to copy the target's textContent, also always respect the content's end of block newline.
-    if (!el.getAttribute('id')) el.setAttribute('id', generateElemId('_code_block_'));
-    const btn = makeCodeCopyButton({'data-clipboard-target': `#${CSS.escape(el.getAttribute('id')!)}`});
+    // so read it on click, which also survives math and mermaid replacing the block
+    const btn = makeCodeCopyButton();
+    btn.addEventListener('click', () => copyToClipboardWithFeedback(btn, el.textContent.replace(/\r?\n$/, '')));
     // we only want to use `.code-block-container` if it exists, no matter `.code-block` exists or not.
     const btnContainer = el.closest('.code-block-container') ?? el.closest('.code-block')!;
     btnContainer.append(btn);