這事你多半遇到過。你複製一個排得挺好看的塊——一張標題卡、一個帶色的標註——粘進公眾號編輯器或 CMS。有時它過去後一模一樣地對；有時它落地成一段光禿禿的文字，設計全被扒掉了。同樣的操作，不同的結果，感覺像是隨機的。其實不是。區別在於你複製的是不是內聯 HTML。
搞懂這一個概念，帶格式貼上就從碰運氣變成可預期。
內聯 HTML 到底是什麼
網頁樣式可以待在兩個地方。在一個普通網站裡，樣式待在一份單獨的樣式表裡，HTML 只用 class 名去引用它：<div class="title-card">。這個 div 單獨拿出來沒有意義——設計待在別處的一個 CSS 檔案裡。
內聯 HTML 則把樣式放進元素自己身上：<div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">。渲染這個塊所需的一切，都跟著塊一起走。沒有要依賴的外部檔案。
這個區別，就是"為什麼有些貼上保住了設計、有些沒保住"的全部答案。當你粘進一個編輯器時，編輯器拿不到源網站的樣式表。如果設計待在那份樣式表裡，它就沒了——你得到光禿禿的結構，也就是看起來像純文字的東西。如果設計是內聯的，它就跟著過來，塊也就正確渲染了。
為什麼公眾號和富文字編輯器需要它
公眾號編輯器很嚴。它會移除外部樣式表，過濾掉大量樣式。一個依賴別處定義的 class 的塊，一旦進了公眾號就無可依靠。很多富文字編輯器和 CMS 的貼上框也是這個脾氣——它們會淨化你粘進去的內容，只保留內聯屬性。
所以，把一個樣式塊可靠地搬進這些編輯器的辦法，就是把它複製成內聯 HTML，讓樣式自成一體。這樣，哪怕是嚴格的編輯器也擁有了按設計顯示這個塊所需的一切。
"帶格式"複製塊是怎麼運作的
現代瀏覽器有一套 Clipboard API，能把富內容——帶格式的 HTML——放到剪貼簿上，而不只是純文字。當一個工具把塊"複製成內聯 HTML"時，它就是在用這套 API，把塊那份自成一體的標記放上你的剪貼簿。接著你在編輯器裡貼上（Ctrl/Cmd+V），因為樣式是內聯的、剪貼簿又帶著 HTML，塊就帶著樣式出現了。
這要成立，兩件事得同時為真：
- 標記必須是內聯樣式的，這樣才不需要外部檔案。
- 剪貼簿必須以 HTML 的形式攜帶它，而不是把尖括號當純文字倒出來。
兩樣都對，貼上就"自然就成了"。少了任意一樣，你得到的要麼是純文字，要麼是一堵看得見的程式碼牆。
不用手改程式碼也能做到
理論上，你可以拿一個樣式塊,手動把每一條樣式內聯進去——把每個 class 的規則搬進每個元素的 style="" 屬性裡。但凡塊稍微複雜一點，這就既繁瑣又容易出錯，尤其是 SVG 卡片，樣式散在許多節點上。
用一個替你處理的工具更省事。IMG.DIY 的公眾號排版模組提取從你粘進去的公眾號內容裡提取樣式塊，並給每個塊一個複製按鈕——透過 Clipboard API 把它作為內聯 HTML 放上剪貼簿。你點複製，切到公眾號編輯器（或你的 CMS、或一個富文字框），貼上，塊就保住了格式。不用手動內聯，也不用去修壞掉的標記。
一份貼上速查清單
當帶樣式的貼上出岔子時，過一遍這幾條：
- 你複製的是內聯 HTML，還是截圖/純文字？ 只有內聯 HTML 才會作為可用的樣式塊粘進去。
- 粘進編輯器正常的正文區，別粘進"原始碼"或"純文字"模式，那些模式可能會剝掉或轉義標記。
- 在預覽裡看看這個塊。 公眾號自帶的預覽會顯示塊在手機上實際怎麼渲染——釋出前先在那兒確認。
- 顏色不對就先改色再複製。 在提取器裡你可以點一處顏色、把塊裡所有相同顏色一起改，這樣你複製出來的就已經是你的品牌色了。
有一條限制值得再說一遍：這類工具是複製和整理塊的——它是個提取器，不是從零開始的模板設計工具，也沒法透過網址抓文章（瀏覽器會攔截對公眾號頁面的跨站抓取，所以你得把內容粘進去）。在這個邊界之內，內聯 HTML 正是讓一個樣式塊從一個編輯器搬到另一個還能保住設計的關鍵。
等你見過幾次塊完美粘進去之後，先前那種"隨機感"就說得通了：它從來不是隨機的。它一直取決於樣式有沒有跟在塊裡一起走。