diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index 3d10b07..0fa79fb 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -790,7 +790,20 @@
                  </div>`;
         }
 
-        // For regular code blocks, add a copy button
+        // For regular code blocks, call the original renderer to get properly escaped HTML
+        const originalCodeHtml = originalCodeRenderer({ text, lang, escaped });
+
+        // Extract the code content from the original HTML to add our custom wrapper
+        // The original renderer returns: <pre><code class="language-x">escapedText</code></pre>
+        const codeMatch = originalCodeHtml.match(
+          /<pre><code[^>]*>([\s\S]*?)<\/code><\/pre>/,
+        );
+        if (!codeMatch) {
+          // Fallback to original if we can't parse it
+          return originalCodeHtml;
+        }
+
+        const escapedText = codeMatch[1];
         const id = `code-block-${Math.random().toString(36).substring(2, 10)}`;
         const langClass = lang ? ` class="language-${lang}"` : "";
 
@@ -804,7 +817,7 @@
                      </svg>
                    </button>
                  </div>
-                 <pre><code id="${id}"${langClass}>${text}</code></pre>
+                 <pre><code id="${id}"${langClass}>${escapedText}</code></pre>
                </div>`;
       };