diff --git a/appview/pages/funcmap.go b/appview/pages/funcmap.go
index 2a0c8ee6..4997d0bb 100644
--- a/appview/pages/funcmap.go
+++ b/appview/pages/funcmap.go
@@ -40,6 +40,12 @@ import (
 
 type tab map[string]string
 
+type MarkdownSegment struct {
+	HTML   template.HTML
+	IsCode bool
+	Lines  int
+}
+
 func (p *Pages) funcMap() template.FuncMap {
 	return template.FuncMap{
 		"split": func(s string) []string {
@@ -306,6 +312,13 @@ func (p *Pages) funcMap() template.FuncMap {
 			sanitized := rctx.SanitizeDefault(htmlString)
 			return template.HTML(sanitized)
 		},
+		"markdownSegments": func(text string) []MarkdownSegment {
+			rctx := p.rctx.Clone()
+			rctx.RendererType = markup.RendererTypeDefault
+			htmlString := rctx.RenderMarkdown(text)
+			sanitized := rctx.SanitizeDefault(htmlString)
+			return splitCodeBlockSegments(string(sanitized))
+		},
 		"description": func(text string) template.HTML {
 			rctx := p.rctx.Clone()
 			rctx.RendererType = markup.RendererTypeDefault
@@ -625,6 +638,73 @@ func (p *Pages) AvatarUrl(actor, size string) string {
 	return baseUrl
 }
 
+func splitCodeBlockSegments(html string) []MarkdownSegment {
+	var segments []MarkdownSegment
+	remaining := html
+	closeTag := `</pre>`
+
+	for {
+		idx := strings.Index(remaining, `<pre`)
+		if idx == -1 {
+			if remaining != "" {
+				segments = append(segments, MarkdownSegment{HTML: template.HTML(remaining)})
+			}
+			break
+		}
+		openEnd := strings.Index(remaining[idx:], `>`)
+		if openEnd == -1 {
+			remaining = remaining[idx:]
+			continue
+		}
+		openEnd += idx
+		openTag := remaining[idx : openEnd+1]
+
+		if strings.Contains(openTag, `mermaid`) {
+			closeIdx := strings.Index(remaining[openEnd+1:], closeTag)
+			if closeIdx == -1 {
+				remaining = remaining[idx:]
+				continue
+			}
+			closeIdx += openEnd + 1
+
+			if idx > 0 {
+				segments = append(segments, MarkdownSegment{HTML: template.HTML(remaining[:idx])})
+			}
+
+			preEnd := closeIdx + len(closeTag)
+			preHTML := remaining[idx:preEnd]
+			segments = append(segments, MarkdownSegment{
+				HTML: template.HTML(preHTML),
+			})
+			remaining = remaining[preEnd:]
+			continue
+		}
+
+		closeIdx := strings.Index(remaining[openEnd+1:], closeTag)
+		if closeIdx == -1 {
+			remaining = remaining[idx:]
+			continue
+		}
+		closeIdx += openEnd + 1
+
+		if idx > 0 {
+			segments = append(segments, MarkdownSegment{HTML: template.HTML(remaining[:idx])})
+		}
+
+		preEnd := closeIdx + len(closeTag)
+		preHTML := remaining[idx:preEnd]
+		content := remaining[openEnd+1 : closeIdx]
+		lines := strings.Count(content, "\n") + 1
+		segments = append(segments, MarkdownSegment{
+			HTML:   template.HTML(preHTML),
+			IsCode: true,
+			Lines:  lines,
+		})
+		remaining = remaining[preEnd:]
+	}
+	return segments
+}
+
 func (p *Pages) icon(name string, classes []string) (template.HTML, error) {
 	iconPath := filepath.Join("static", "icons", name)
 
diff --git a/appview/pages/templates/fragments/comment/commentBody.html b/appview/pages/templates/fragments/comment/commentBody.html
index 2a8d35e8..35cb5ae1 100644
--- a/appview/pages/templates/fragments/comment/commentBody.html
+++ b/appview/pages/templates/fragments/comment/commentBody.html
@@ -1,7 +1,7 @@
 {{ define "fragments/comment/commentBody" }}
 <div class="comment-body">
   {{ if not .Comment.Deleted }}
-    <div class="prose dark:prose-invert mb-1">{{ .Comment.Body.Text | markdown }}</div>
+    <div class="prose dark:prose-invert mb-1">{{ template "fragments/markdown/body" (dict "Segments" (.Comment.Body.Text | markdownSegments)) }}</div>
     {{ template "repo/fragments/reactions"
       (dict "Reactions"   .Reactions
             "UserReacted" .UserReacted
diff --git a/appview/pages/templates/fragments/markdown/body.html b/appview/pages/templates/fragments/markdown/body.html
new file mode 100644
index 00000000..d03e9c44
--- /dev/null
+++ b/appview/pages/templates/fragments/markdown/body.html
@@ -0,0 +1,70 @@
+{{ define "fragments/markdown/body" }}
+{{ range $seg := .Segments }}
+{{ if $seg.IsCode }}
+{{ if ge $seg.Lines 28 }}
+<div class="code-block-wrapper">
+  <div class="code-block-pre-container">{{ $seg.HTML }}</div>
+  <div class="code-block-actions">
+    <div class="flex items-center gap-3">
+      <label class="btn">
+        <input type="checkbox" class="code-block-expand peer/collapse !hidden">
+        <span class="peer-checked/collapse:hidden inline-flex items-center gap-1">{{ i "unfold-vertical" "w-4 h-4" }}<span class="hidden sm:inline">Expand code</span></span>
+        <span class="hidden peer-checked/collapse:inline-flex items-center gap-1">{{ i "fold-vertical" "w-4 h-4" }}<span class="hidden sm:inline">Collapse code</span></span>
+      </label>
+      <span class="text-sm text-gray-500 dark:text-gray-400 tabular-nums whitespace-nowrap">{{ $seg.Lines }} lines</span>
+    </div>
+    <div class="flex items-center gap-1.5">
+      <button class="btn code-block-copy-btn" title="Copy to clipboard">
+        <span class="copy-default inline-flex">{{ i "copy" "w-4 h-4" }}</span>
+        <span class="copy-success hidden inline-flex">{{ i "copy-check" "w-4 h-4" }}</span>
+        <span class="hidden sm:inline">Copy to clipboard</span>
+      </button>
+      <button class="btn code-block-open-raw-btn" title="Open raw in new tab">
+        {{ i "external-link" "w-4 h-4" }}
+        <span class="hidden sm:inline">Open raw in new tab</span>
+      </button>
+    </div>
+  </div>
+</div>
+{{ else }}
+{{ $seg.HTML }}
+{{ end }}
+{{ else }}
+{{ $seg.HTML }}
+{{ end }}
+{{ end }}
+<script>
+(() => {
+  if (document.__tangledCbInit) return;
+  document.__tangledCbInit = true;
+
+  document.addEventListener('click', (e) => {
+    const copyBtn = e.target.closest('.code-block-copy-btn');
+    if (copyBtn) {
+      const pre = copyBtn.closest('.code-block-wrapper')?.querySelector('pre');
+      if (!pre) return;
+      navigator.clipboard.writeText(pre.textContent).then(() => {
+        copyBtn.querySelector('.copy-default')?.classList.add('hidden');
+        copyBtn.querySelector('.copy-success')?.classList.remove('hidden');
+        setTimeout(() => {
+          copyBtn.querySelector('.copy-default')?.classList.remove('hidden');
+          copyBtn.querySelector('.copy-success')?.classList.add('hidden');
+        }, 1500);
+      });
+      return;
+    }
+
+    const rawBtn = e.target.closest('.code-block-open-raw-btn');
+    if (rawBtn) {
+      const pre = rawBtn.closest('.code-block-wrapper')?.querySelector('pre');
+      if (!pre) return;
+      const text = pre.textContent;
+      const blob = new Blob([text], {type: 'text/plain'});
+      const url = (window.URL ?? window.webkitURL).createObjectURL(blob);
+      window.open(url, '_blank');
+      setTimeout(() => (window.URL ?? window.webkitURL).revokeObjectURL(url), 0);
+    }
+  });
+})();
+</script>
+{{ end }}
diff --git a/appview/pages/templates/fragments/markdownPreview.html b/appview/pages/templates/fragments/markdownPreview.html
index b65f13b3..9a4d5043 100644
--- a/appview/pages/templates/fragments/markdownPreview.html
+++ b/appview/pages/templates/fragments/markdownPreview.html
@@ -1,7 +1,7 @@
 {{ define "fragments/markdownPreview" }}
     {{ if . }}
         <div class="prose dark:prose-invert max-w-none">
-            {{ . | markdown }}
+            {{ template "fragments/markdown/body" (dict "Segments" (. | markdownSegments)) }}
         </div>
     {{ else }}
         <div class="text-gray-400 dark:text-gray-500 italic">Nothing to preview.</div>
diff --git a/appview/pages/templates/repo/issues/issue.html b/appview/pages/templates/repo/issues/issue.html
index 12039bf6..d1e437ff 100644
--- a/appview/pages/templates/repo/issues/issue.html
+++ b/appview/pages/templates/repo/issues/issue.html
@@ -33,7 +33,7 @@
   {{ template "issueHeader" .Issue }}
   {{ template "issueInfo" . }}
   {{ if .Issue.Body }}
-    <article id="body" class="mt-4 prose dark:prose-invert">{{ .Issue.Body | markdown }}</article>
+    <article id="body" class="mt-4 prose dark:prose-invert">{{ template "fragments/markdown/body" (dict "Segments" (.Issue.Body | markdownSegments)) }}</article>
   {{ end }}
   <div class="mt-4">
     {{ $aturi := .Issue.AtUri }}
diff --git a/appview/pages/templates/repo/pulls/fragments/pullHeader.html b/appview/pages/templates/repo/pulls/fragments/pullHeader.html
index 182a8451..27cfcf30 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullHeader.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullHeader.html
@@ -44,7 +44,7 @@
 
     {{ if .Pull.Body }}
         <article id="body" class="mt-8 prose dark:prose-invert">
-            {{ .Pull.Body | markdown }}
+            {{ template "fragments/markdown/body" (dict "Segments" (.Pull.Body | markdownSegments)) }}
         </article>
     {{ end }}
 
diff --git a/input.css b/input.css
index 412f6727..557e4474 100644
--- a/input.css
+++ b/input.css
@@ -201,7 +201,7 @@
     @layer components {
         .btn {
             @apply relative z-10 inline-flex overflow-hidden items-center justify-center
-          min-h-[32px] px-2 py-[6px]
+          min-h-[32px] px-2 py-[6px] gap-1.5
           rounded border border-gray-200 dark:border-gray-700
           bg-white dark:bg-gray-800
           text-sm text-gray-900 dark:text-gray-100
@@ -367,6 +367,29 @@
             @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0;
         }
 
+        /* Code block collapse */
+        .code-block-wrapper {
+            @apply flex flex-col max-h-[600px] overflow-hidden border border-gray-200 rounded-md dark:border-gray-700;
+
+            &:has(.code-block-expand:checked) {
+                @apply max-h-none overflow-visible;
+
+                .code-block-pre-container {
+                    overflow-y: visible;
+                }
+            }
+
+            :where(pre) {
+                @apply m-0 border-none rounded-none dark:bg-transparent;
+            }
+        }
+        .code-block-pre-container {
+            @apply overflow-y-hidden flex-1 bg-gray-50 dark:bg-gray-900;
+        }
+        .code-block-actions {
+            @apply flex items-center justify-between border-t border-gray-200 bg-white p-2 shrink-0 dark:border-gray-700 dark:bg-gray-800;
+        }
+
         /* Base callout */
         details[data-callout] {
             @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4;