diff --git a/modules/markup/markdown/markdown.go b/modules/markup/markdown/markdown.go
index 0d7180c6b1..79df547c2c 100644
--- a/modules/markup/markdown/markdown.go
+++ b/modules/markup/markdown/markdown.go
@@ -86,20 +86,15 @@ func (r *GlodmarkRender) highlightingRenderer(w util.BufWriter, c highlighting.C
 			preClasses += " is-loading"
 		}
 
-		err := r.ctx.RenderInternal.FormatWithSafeAttrs(w, `<pre class="%s">`, preClasses)
-		if err != nil {
-			return
-		}
-
 		// include language-x class as part of commonmark spec, "chroma" class is used to highlight the code
 		// the "display" class is used by "js/markup/math.ts" to render the code element as a block
 		// the "math.ts" strictly depends on the structure: <pre class="code-block is-loading"><code class="language-math display">...</code></pre>
-		err = r.ctx.RenderInternal.FormatWithSafeAttrs(w, `<code class="chroma language-%s display">`, languageStr)
+		err := r.ctx.RenderInternal.FormatWithSafeAttrs(w, `<div class="code-block-container code-overflow-scroll"><pre class="%s"><code class="chroma language-%s display">`, preClasses, languageStr)
 		if err != nil {
 			return
 		}
 	} else {
-		_, err := w.WriteString("</code></pre>")
+		_, err := w.WriteString("</code></pre></div>")
 		if err != nil {
 			return
 		}
diff --git a/templates/devtest/markup-render.tmpl b/templates/devtest/markup-render.tmpl
new file mode 100644
index 0000000000..69d29d7829
--- /dev/null
+++ b/templates/devtest/markup-render.tmpl
@@ -0,0 +1,71 @@
+{{template "devtest/devtest-header"}}
+<div class="page-content devtest ui container">
+	{{$longCode := "0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef"}}
+	<div class="tw-flex">
+		<div class="tw-w-[50%] tw-p-4">
+			<div class="markup render-content">
+				Inline <code>code</code> content
+			</div>
+
+			<div class="divider"></div>
+
+			<div class="markup render-content">
+				<p>content before</p>
+				<pre><code>Very long line with no code block or container: {{$longCode}}</code></pre>
+				<p>content after</p>
+			</div>
+
+			<div class="divider"></div>
+
+			<div class="markup render-content">
+				<p>content before</p>
+				<div class="code-block-container code-overflow-wrap">
+					<pre class="code-block"><code>Very long line with wrap: {{$longCode}}</code></pre>
+				</div>
+				<p>content after</p>
+			</div>
+
+			<div class="divider"></div>
+
+			<div class="markup render-content">
+				<p>content before</p>
+				<div class="code-block-container code-overflow-scroll">
+					<pre class="code-block"><code>Short line in scroll container</code></pre>
+				</div>
+				<div class="code-block-container code-overflow-scroll">
+					<pre class="code-block"><code>Very long line with scroll: {{$longCode}}</code></pre>
+				</div>
+				<p>content after</p>
+			</div>
+		</div>
+
+		<div class="tw-w-[50%] tw-p-4">
+			<div class="markup render-content">
+				<p>content before</p>
+				<div class="code-block-container">
+					<pre class="code-block"><code class="language-math">
+	\lim\limits_{n\rightarrow\infty}{\left(1+\frac{1}{n}\right)^n}
+					</code></pre>
+				</div>
+				<p>content after</p>
+			</div>
+
+			<div class="divider"></div>
+
+			<div class="markup render-content">
+				<p>content before</p>
+				<div class="code-block-container">
+					<pre class="code-block"><code class="language-mermaid is-loading">
+	graph LR
+			A[Square Rect] -- Link text --> B((Circle))
+			A --> C(Round Rect)
+			B --> D{Rhombus}
+			C --> D
+					</code></pre>
+				</div>
+				<p>content after</p>
+			</div>
+		</div>
+	</div>
+</div>
+{{template "devtest/devtest-footer"}}
diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css
index e3017ae962..5a7b9955e7 100644
--- a/web_src/css/markup/codecopy.css
+++ b/web_src/css/markup/codecopy.css
@@ -1,8 +1,3 @@
-.markup .code-block,
-.markup .mermaid-block {
-  position: relative;
-}
-
 .markup .code-copy {
   position: absolute;
   top: 8px;
@@ -28,8 +23,8 @@
   background: var(--color-secondary-dark-1) !important;
 }
 
-.markup .code-block:hover .code-copy,
-.markup .mermaid-block:hover .code-copy {
+.markup .code-block-container:hover .code-copy,
+.markup .code-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 937224a9d7..8291539b95 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -443,13 +443,25 @@
 }
 
 .markup pre > code {
-  padding: 0;
-  margin: 0;
   font-size: 100%;
+}
+
+.markup .code-block,
+.markup .code-block-container {
+  position: relative;
+}
+
+.markup .code-block-container.code-overflow-wrap pre > code {
   white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  background: transparent;
-  border: 0;
+}
+
+.markup .code-block-container.code-overflow-scroll pre {
+  overflow-x: auto;
+}
+
+.markup .code-block-container.code-overflow-scroll pre > code {
+  white-space: pre;
+  overflow-wrap: normal;
 }
 
 .markup .highlight {
@@ -470,16 +482,11 @@
   word-break: normal;
 }
 
-.markup pre {
-  word-wrap: normal;
-}
-
 .markup pre code,
 .markup pre tt {
   display: inline;
   padding: 0;
   line-height: inherit;
-  word-wrap: normal;
   background-color: transparent;
   border: 0;
 }
diff --git a/web_src/js/markup/codecopy.ts b/web_src/js/markup/codecopy.ts
index 67284bad55..b37aa3a236 100644
--- a/web_src/js/markup/codecopy.ts
+++ b/web_src/js/markup/codecopy.ts
@@ -15,6 +15,8 @@ export function initMarkupCodeCopy(elMarkup: HTMLElement): void {
     const btn = makeCodeCopyButton();
     // remove final trailing newline introduced during HTML rendering
     btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, ''));
-    el.after(btn);
+    // 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);
   });
 }