什麼是程式碼區塊？

在聊天訊息（包括開場白與 AI 回覆）中，程式碼區塊不會以純程式碼文字顯示，而會渲染成一個真正可互動的網頁——按鈕可以點擊、動畫可以播放，任何你能用前端技術（HTML、CSS、JavaScript）實現的介面都可以出現在訊息裡。

配合開放能力，程式碼區塊還能與聊天頁面互動——例如把選項文字填入輸入框、切換開場白版本。所有開放能力函式都只能寫在程式碼區塊中呼叫。

怎麼寫程式碼區塊

把完整的網頁程式碼包進圍欄程式碼區塊，就會渲染成可互動的網頁。語言標記寫 html 最常用，也是建議寫法：

markdown

```html
<!doctype html>
<html>
  <head>
    <style>
      button { padding: 8px 16px; }
    </style>
  </head>
  <body>
    <button onclick="this.textContent = '已點擊'">點擊</button>
  </body>
</html>
```

偶爾也會有 xml、無標記或其他語言標記的寫法——只要是圍欄程式碼區塊、內容是完整網頁，同樣會被識別：

markdown

```xml
<!doctype html>
<html>
  <body>...</body>
</html>
```

注意：只寫 <div>、<button> 等裸片段且未標 html 的程式碼區塊不會被識別，請始終按完整網頁編寫。

顯示效果

程式碼區塊總是佔據聊天氣泡的最大寬度，高度隨內容自動撐開。

執行環境與限制

程式碼區塊執行在獨立的沙箱中，應把自己視為一個小型獨立網頁，透過開放能力函式請求聊天頁面操作，而不是查找或修改聊天頁面的內容。

腳本

支援經典內聯腳本，onclick 等內聯事件處理器會保留
所有 <script> 會統一移動到文件底部執行，不保留原來在程式碼中的位置。依賴「腳本必須先於某個後續 DOM 節點執行」的程式碼，需要改為在 DOM 建立後執行，或監聽 DOMContentLoaded
<script src="..."> 外部腳本不會載入；type="module" 等腳本屬性不會保留
eval、Function、window.open、print 等能力被封鎖

網路與資源

fetch、XMLHttpRequest、WebSocket 等網路連線會被拒絕
圖片支援 data:、blob:、HTTP 和 HTTPS；音訊影片支援 HTTP 和 HTTPS；字型支援 data:、HTTP 和 HTTPS
內聯樣式與 HTTP/HTTPS 外部樣式表可用

儲存

localStorage / sessionStorage 是僅當前程式碼區塊可見的記憶體實作，訊息重新渲染後即重置，不能用於持久化儲存
不提供 IndexedDB

頁面存取

程式碼區塊無法存取聊天頁面的 DOM 和狀態；parent、top 都指向程式碼區塊自身
與聊天頁面的互動只能透過開放能力函式

樣式限制

position: fixed 會被改為 position: absolute
大於 999 的 z-index 會被壓到 999

小提示

按完整網頁編寫並標 html 語言標記，是最可靠的寫法
程式碼區塊的核心邏輯不要依賴網路請求和持久化儲存

什麼是程式碼區塊？ ​

怎麼寫程式碼區塊 ​

顯示效果 ​

執行環境與限制 ​

小提示 ​

什麼是程式碼區塊？

怎麼寫程式碼區塊

顯示效果

執行環境與限制

小提示