diff --git a/modules/markup/markdown/markdown.go b/modules/markup/markdown/markdown.go
index ace31eb540778..0f597696ccfd1 100644
--- a/modules/markup/markdown/markdown.go
+++ b/modules/markup/markdown/markdown.go
@@ -86,7 +86,7 @@ func (r *GlodmarkRender) highlightingRenderer(w util.BufWriter, c highlighting.C
 			preClasses += " is-loading"
 		}
 
-		err := r.ctx.RenderInternal.FormatWithSafeAttrs(w, `<pre class="%s">`, preClasses)
+		err := r.ctx.RenderInternal.FormatWithSafeAttrs(w, `<div class="code-wrapper"><pre class="%s">`, preClasses)
 		if err != nil {
 			return
 		}
@@ -99,7 +99,7 @@ func (r *GlodmarkRender) highlightingRenderer(w util.BufWriter, c highlighting.C
 			return
 		}
 	} else {
-		_, err := w.WriteString("</code></pre>")
+		_, err := w.WriteString("</code></pre></div>")
 		if err != nil {
 			return
 		}
diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css
index e3017ae962ec1..0b42b3dadb195 100644
--- a/web_src/css/markup/codecopy.css
+++ b/web_src/css/markup/codecopy.css
@@ -1,8 +1,17 @@
-.markup .code-block,
+.markup .code-wrapper,
 .markup .mermaid-block {
   position: relative;
 }
 
+.code-wrapper {
+  background-color: var(--color-markup-code-block);
+  border-radius: var(--border-radius);
+}
+
+.code-block {
+  margin-right: 56px;
+}
+
 .markup .code-copy {
   position: absolute;
   top: 8px;
@@ -28,7 +37,7 @@
   background: var(--color-secondary-dark-1) !important;
 }
 
-.markup .code-block:hover .code-copy,
+.markup .code-wrapper:hover .code-copy,
 .markup .mermaid-block:hover .code-copy {
   visibility: visible;
   animation: fadein 0.2s both;
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index 865ac0536afa9..42c368da2cd34 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -455,7 +455,7 @@
   padding: 0;
   margin: 0;
   font-size: 100%;
-  white-space: pre-wrap;
+  white-space: pre;
   word-break: break-all;
   overflow-wrap: break-word;
   background: transparent;
@@ -471,8 +471,6 @@
   padding: 16px;
   font-size: 85%;
   line-height: 1.45;
-  background-color: var(--color-markup-code-block);
-  border-radius: var(--border-radius);
 }
 
 .markup .highlight pre {
diff --git a/web_src/js/markup/codecopy.ts b/web_src/js/markup/codecopy.ts
index 4430256848c8b..3ab14471e09be 100644
--- a/web_src/js/markup/codecopy.ts
+++ b/web_src/js/markup/codecopy.ts
@@ -8,11 +8,13 @@ export function makeCodeCopyButton(): HTMLButtonElement {
 }
 
 export function initMarkupCodeCopy(elMarkup: HTMLElement): void {
-  const el = elMarkup.querySelector('.code-block code'); // .markup .code-block code
-  if (!el || !el.textContent) return;
+  const els = elMarkup.querySelectorAll('.code-wrapper'); // .markup .code-block code
 
-  const btn = makeCodeCopyButton();
-  // remove final trailing newline introduced during HTML rendering
-  btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, ''));
-  el.after(btn);
+  for (const el of els) {
+    if (!el || !el.textContent) return;
+    const btn = makeCodeCopyButton();
+    // remove final trailing newline introduced during HTML rendering
+    btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, ''));
+    el.append(btn);
+  }
 }