diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
index a58f1a198..4298f086b 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
@@ -49,6 +49,7 @@ export class CodeHighlighter extends SignalWatcher(WithDisposable(LitElement)) {
 
     /* Container */
     .code-highlighter pre {
+      position: relative;
       margin: 0;
       display: flex;
       overflow: auto;
@@ -73,7 +74,7 @@ export class CodeHighlighter extends SignalWatcher(WithDisposable(LitElement)) {
     }
 
     /* Code area */
-    .code-highlighter .code-container {
+    .code-highlighter :is(.code-container, .code-container-hidden) {
       flex: 1;
       white-space: pre;
       line-height: 20px;
@@ -81,6 +82,17 @@ export class CodeHighlighter extends SignalWatcher(WithDisposable(LitElement)) {
       padding: 0 12px 12px 12px;
     }
 
+    .code-highlighter .code-container {
+      user-select: none;
+    }
+
+    .code-highlighter .code-container-hidden {
+      color: transparent;
+      position: absolute;
+      top: 0;
+      left: 60px;
+    }
+
     .code-highlighter .code-line {
       display: flex;
       min-height: 20px;
@@ -209,6 +221,7 @@ export class CodeHighlighter extends SignalWatcher(WithDisposable(LitElement)) {
     return html`<div class="code-highlighter">
       <pre>
         ${lineNumbersTemplate}
+        <div class="code-container-hidden">${this.code}</div>
         <div class="code-container">${renderedCode}</div>
       </pre>
     </div>`;