頁面編輯器

從這裡開始寫

這一頁是伺服器渲染出來的範例文件。它刻意放進了每一種區塊，以及一些過去真的把版面弄壞過的情況。

連結會套在選取的文字上，像是Joln Dev。

文字樣式

可以套用的樣式有：粗體、斜體、底線、刪除線、行內程式碼、螢光標記。

文字顏色存的是色鍵，不是色碼——所以同一份內容送到不同的客戶端，顏色會跟著對方的主題走：重點、次要、完成、注意、警告、一般。

底色用的是同一組色鍵：重點、次要、完成、注意、警告、一般。

疊起來也要看得清楚：六種樣式疊在同一段文字上。

換行和換段落不一樣。這一段裡有一個強制換行：同一個區塊裡的第一行，
第二行還在同一塊裡面。

標題階層

頁面標題本身佔用了 h1，所以內容裡的一級標題會往下移一層，實際畫出來是 h2，但它仍然記著作者選的是第一級。這六個層級的大小都是明確定義的——五、六級如果不寫，瀏覽器的預設值會讓它們比正文還小，看起來像註腳。

一級標題

二級標題

三級標題

四級標題

五級標題

六級標題

清單

項目符號清單可以往內縮：

• 第一層。

  • 第二層。

    • 第三層。清單的縮排是真的巢狀結構——子清單放在項目裡面，不是一個縮排數字。

像這樣：

• 一個項目裡可以放好幾個區塊，不只是一行字。

  第二段。區塊之間有間距，但最後一個區塊後面沒有，所以項目不會多出一截空白。

  一個項目可以放好幾個區塊

編號清單也一樣：

1. 編號由瀏覽器計算，內容裡不會存死。

2. 第二項。

   1. 巢狀的編號會重新從一開始。

   2. 第二個。

3. 第三項。

待辦清單的勾選框在發佈後的頁面上是唯讀的——讀者不能勾，所以它就長成不能勾的樣子：

• 還沒完成的事項

• 已經完成的事項

  • 還沒完成的子項目。

  • 巢狀的子項目也可以勾。

• 一個很長的待辦事項，長到需要折行。折行之後，勾選框要留在第一行的行首，不能被文字推到中間，也不能跟著文字一起縮排。

重點提示

重點提示有五種語氣，左邊那條線會跟著語氣換色。它存的是語氣，不是色碼，所以換主題的時候顏色也會跟著換：

引用與收合

引用區塊：

引用可以放好幾段。左邊那條線要一路貫穿整個引用，不是只出現在第一段旁邊。

第二段。段落之間有間距，引用的最後一段後面沒有多餘的空白。

第三段，用來確認那條線真的到底。

收合區塊預設是關起來的。瀏覽器原生的三角形在每個瀏覽器裡都長得不一樣，所以它被關掉，改用 CSS 自己畫一個，展開時會轉向。

甚至可以放一整個提示詞區塊

提示詞區塊

提示詞區塊存的是純文字，不做語法標示——它的使用者不是工程師，而且裡面通常是很長的一段指令。長行會自動折行，不會往旁邊撐開。

請把下面這份逐字稿整理成三個重點，每點不超過二十個字，保留原文的語氣，不要加入原文沒有提到的資訊，也不要替講者補上他沒有說出口的結論。

輸出格式：
1. 重點一
2. 重點二
3. 重點三

提示詞的多個版本

同一個區塊可以放好幾個版本，每個版本自己一個名字：同一段提示詞寫給不同的模型，或是長版跟短版。在編輯器裡它們是分頁；發佈後的頁面沒有 JavaScript，所以是一個接一個列出來，每一個都標著自己的名字。

請把下面這份逐字稿整理成三個重點。每一點不要超過二十個字，保留原文的語氣，不要加入原文沒有提到的資訊，也不要替講者補上他沒有說出口的結論。如果逐字稿裡有互相矛盾的地方，兩邊都列出來，不要自己選一個。

把下面這段整理成三個重點，每點二十字內，不要加東西。

表格

表格的儲存格可以跨欄、跨列。這一個的表頭兩者都用到了：

表格會撐滿內容的寬度，欄位分掉剩下的空間。真的塞不下的時候，是表格自己橫向捲動，不會把整個頁面往旁邊推。表頭不會自己折行，要換行請自己按 Shift+Enter：

圖片與影片

圖片是區塊層級的，會置中並且不超過內容的寬度。這一張的原始尺寸是 1200 x 675，比內容欄還寬，所以會被縮到欄寬：

這一張的原始尺寸是 240 x 320，比內容欄窄，所以會維持原本大小、不會被拉大。在編輯器裡選到圖片之後，右下角會出現控制點可以拉大縮小，比例會固定不變：

影片用提供者自己的 iframe 嵌入，走的是不寫入 Cookie 的網域：

下面這一塊是一個網址不合格的影片。它不會被靜靜丟掉，也不會把那個網址塞進 iframe，而是顯示成一個看得見的佔位區塊：

極端狀況

先是一段很長的中文。

這一段刻意寫得很長，用來看一個接近長度上限的區塊在畫面上會佔掉多少空間。每一個中文字算一個單位，英文則以空白分隔的字數計算，所以五百個中文字的段落和五百個英文字的段落會落在同一個上限上，這是刻意的：兩種語言在這個長度上承載的內容量差不多。標點符號也算一個單位，全形的逗號和句號跟它們前後的字一樣重，不會被當成一個英文單字來算，否則一段五百字的中文只要帶上五十個標點就會被判定超過上限。行距、段落之間的距離、還有一行的最大寬度，都會影響一段長文讀起來的感覺：太寬會讓眼睛換行時找不到下一行的開頭，太窄則會讓句子被切得很碎。把一段真正的長文放在這裡，比在測試裡數字元數更容易看出問題。

上面那一段大約三百個單位，離每個段落五百個單位的上限還有一段距離。超過上限的那一次按鍵不會生效——上限是按段落算的，不是整個區塊，也不是整份文件。

然後是一個長到超過一行的網址：

https://example.com/a/very/long/path/that/keeps/going/and/going/until/it/could/not/possibly/fit/inside/one/line/of/the/content/column/index.html?query=an-extremely-long-query-string-value

接著是一個中間沒有空白、也沒有斜線可以斷的長字串：

AbstractSingletonProxyFactoryBeanConfigurationDelegate_2026_07_30_FINAL_v3

表情符號是行內節點，跟前後的文字排在同一行：🚀✨⚠它畫出來的是字元本身，不是從別人的伺服器抓來的圖片。