Publish Helper logo

將 Notion 轉換為乾淨 HTML

Notion 的複製貼上 HTML 使用深層嵌套的 div 結構、自訂 data 屬性和與其內部區塊系統綁定的 class 名稱。雖然比 Google Docs 或 Word 乾淨,但 Notion 的貼上內容仍然帶有不必要的 wrapper 元素和非 semantic 標記。Publish Helper 可移除 Notion 的殘留標記,產生乾淨且適用於 CMS 的 HTML。

I

為什麼 Notion 的 HTML 這麼亂

Notion 將每個內容區塊包裝在帶有 data-block-id 屬性和內部 class 名稱的嵌套 div 中。折疊區塊、標注和資料庫使用自訂標記結構,這些結構無法轉換為標準 HTML。內聯格式通常使用帶有 style 屬性的 <span> wrapper,而非 semantic 標籤。

II

清理前後對比

Notion 輸出

<div data-block-id="abc123" class="notion-text-block">
  <div class="notion-text-block__content">
    <span style="font-weight:600">Introduction</span>
  </div>
</div>
<div data-block-id="def456" class="notion-text-block">
  <div class="notion-text-block__content">
    This is a paragraph with <span style="font-weight:600">bold text</span> and <span style="font-style:italic">italic text</span>.
  </div>
</div>

乾淨的 HTML

<h2>Introduction</h2>
<p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
III

如何清理 Notion 的 HTML

1.從 Notion 複製您的內容

2.貼到 Publish Helper 中並設定清理選項

3.點擊清理 HTML 並複製結果

IV

常見問題

Notion 的 HTML 比 Google Docs 乾淨嗎?

+

一般來說是的 — Notion 不會像 Google Docs 那樣為每個字元添加 inline styles。然而,Notion 使用深層嵌套的 div wrapper 和自訂 data 屬性,這些在發佈到 CMS 時仍然需要清理。Publish Helper 兩者都能處理。

可以將 Notion 的表格貼到 Publish Helper 嗎?

+

可以。Notion 的表格 HTML 在貼上時會被保留。Publish Helper 會移除 Notion 特定的 wrapper 和屬性,同時保持表格結構完整。

Notion 的折疊區塊和標注怎麼處理?

+

折疊區塊和標注使用的 Notion 自訂標記沒有標準 HTML 等效結構。Publish Helper 會保留文字內容,但移除 Notion 特定的 wrapper 元素。

Last updated: May 2026|Built by content editors for content editors|Used by 10,000+ bloggers
Related Tools & Guides

Ready to clean your HTML?

Open Publish Helper

Last updated: March 2026

更新日誌

v3.3.12026-06-17
  • 修復Slug 產生器更新至最新 AI 模型,提升穩定性
  • 修復標題轉換支援直排中日韓文字常用的 U+FE30 冒號分隔符(︰)
  • 修復標題轉換不再將前導 &nbsp; 包含在提取的標題中
  • 修復OG 圖片產生器現在會自動換行長中日韓文字,並使用省略號防止溢出
  • 改進更新 sharp 至 0.35.1 以提升圖片處理效能
v3.3.02026-05-30
  • 修復SEO 及無障礙:<html lang> 屬性、theme-color meta、OG 圖片 alt 文字國際化
  • 修復拒絕 Cookie 同意時正確移除 GA 腳本
  • 修復內容統計國際化 + 連結計數正則修正
  • 修復工具頁面章節編號修正(全部 14 頁)
  • 改進簡化清理選項 — 移除 10 個 Tiptap 已處理的勾選框,只保留 4 個實用選項
  • 改進自動清理僅在貼上時觸發,不再每次內容變更都執行
v3.2.12026-05-26
  • 修復標題轉換器正確拆分包含多個標題 strong 元素的段落
  • 修復標題轉換器將提取的標題放在正文段落之前,保持正確的文檔順序
  • 修復編輯器工具列不再導致 React hydration 不匹配
  • 修復補回缺失的 @tiptap/extension-drag-handle-react 依賴
v3.2.02026-05-23
  • 新功能6 個全新 SEO 內容編輯工具 — 大小寫轉換器、純文字提取器、文字差異比對、關鍵字密度分析、SERP 預覽產生器、可讀性檢查
  • 新功能標題下拉選單擴展至 H5-H6(原本只到 H1-H4)
  • 新功能表格工具列 — 插入/刪除行列、合併/拆分儲存格、切換標題列
  • 新功能拖曳手把 — 在編輯器中拖曳重新排列區塊
  • 新功能大小寫轉換器 — 11 種格式包括 camelCase、PascalCase、snake_case、kebab-case
  • 改進SERP 預覽 — 精確的 Google 風格預覽,支援桌面/手機版面
  • 改進文字差異比對 — 變更行內的單字級高亮
  • 改進所有新工具已從主頁「工具與指南」區塊及相關頁面連結
  • 改進修復所有工具頁面的繁體中文 FAQ 對齊問題
v3.1.12026-05-23
  • 修復編輯器草稿還原 — 儲存的內容現在正確載入 Tiptap 編輯器
  • 改進依賴更新,提升效能與穩定性
v3.1.02026-05-14
  • 新功能列表標籤粗體 — 自動將列表項目的標籤前綴加粗(如「Name: John」→「<strong>Name:</strong> John」)
  • 新功能格式化附加元件分組 — 標題轉換、中日韓自動空格、列表標籤粗體整合為可摺疊區塊
  • 修復中日韓自動空格跨 HTML 標籤邊界運作
v3.0.22026-05-08
  • 修復標題轉換器正確拆分單一 <strong> 元素中以 <br> 分隔的多個 H2/H3 前綴
v3.0.12026-05-07
  • 修復HTML 清理器正確移除 Google Docs 遺留的孤立 <strong><br><br></strong> 標籤
  • 修復標題轉換器偵測段落末端 <strong> 標籤中的 H2/H3 前綴
  • 修復段落末端的 <br> 標籤現在被移除 — 標題前不再有多餘換行
v3.0.02026-05-03
  • 新功能HTML 差異檢視器 — 以視覺化差異(綠/紅)比對修改前後的 HTML
  • 新功能內容統計計算器 — 字數、閱讀時間、標題數、圖片數、連結數
  • 新功能HTML 無障礙檢查器 — 偵測缺失 alt 文字、空標題、跳級標題等問題
  • 新功能OG 圖片產生器 — 從部落格標題建立 1200×630 社群分享圖片
  • 新功能Markdown ↔ HTML 轉換器 — Markdown 與 HTML 雙向轉換
  • 新功能目錄產生器 — 從 HTML 或 Markdown 標題自動產生巢狀目錄
  • 新功能JSON-LD 結構化資料建立器 — 產生 Article、BlogPosting、FAQPage 結構化標記
  • 新功能貼上自動清理 — 可選開關,貼上內容時自動觸發清理
  • 新功能表格清理選項 — 移除儲存格寬度和空白儲存格
  • 新功能自動儲存草稿 — 內容存入 localStorage,意外重新整理後可還原
  • 新功能所有新工具已從主頁「工具與指南」區塊及相關頁面連結
v2.4.12026-04-27
  • 新功能標題下拉選單新增「段落」選項 — 可將標題轉回一般文字
  • 修復H1-H6 標題前綴即使帶有前導換行也能正確轉換
  • 修復修復頁面載入崩潰 — Cookie 同意彈窗現在穩定顯示
  • 改進依賴更新,提升效能與穩定性
v2.4.02026-04-17
  • 新功能清除按鈕 — 從左側面板標題快速清空編輯器並重設 HTML 面板
  • 修復清空編輯器後 HTML 面板不再出現空白 <p></p> 佔位符
  • 新功能透過 URL 插入圖片 — 用新工具列彈窗貼上任何圖片 URL
v2.3.22026-04-14
  • 修復標題轉換以 DOM 解析重寫 — 支援任何包裹標籤、拆分標題,並安全保留列表中的 <li>
  • 修復Google Docs 遺留的空標題標籤現在自動移除
v2.3.12026-03-25
  • 修復標題轉換處理冒號前的空格(如「H2 : Title」)
  • 修復由右至左的內容(阿拉伯文、希伯來文)不再反轉內嵌英文
  • 修復間隔段落(&nbsp;)現在保留在 HTML 輸出中,不再被移除
v2.3.02026-03-20
  • 新功能中日韓自動空格 — 自動在中文/日文/韓文字元與英文字母或數字之間插入空格(使用 pangu.js)
  • 新功能獨立的中日韓自動空格工具頁面,附修改前後範例、FAQ 及 SEO 優化的雙語內容
  • 新功能中文介面文字自動空格 — 繁體中文介面文字正確顯示中日韓-拉丁字元間距
  • 修復手機工具列不再浮動跟隨捲動 — 固定在編輯器底部
  • 修復手機工具列按鈕改為水平捲動,不再溢出
  • 修復尋找與取代輸入框不再在窄螢幕上溢出容器
v2.2.12026-03-20
  • 修復標題轉換使用文字前綴(如 H3:)設定標題層級,即使內容已在不同的標題標籤中
v2.2.02026-03-18
  • 新功能AI 標題轉 SEO Slug — 10 秒內將任何語言的部落格標題轉為 SEO 友善的英文網址
  • 新功能主頁新增 Slug 產生器開關 — 編輯後直接產生,無需捲動
  • 新功能表格支援 — 從 Google Docs 貼上的表格現在正確顯示
  • 新功能移除標題後 <br> 的清理選項(預設開啟)
  • 新功能HTML 程式碼檢視支援部分文字選取複製
  • 新功能底部固定「清理 HTML」按鈕
  • 改進標題轉換移除現有標題標籤的前綴,支援中文全形冒號(:)
  • 改進所有頁面共用頁尾
v2.1.22026-03-17
  • 修復錯誤修復與改善
v2.1.12026-03-16
  • 修復錯誤修復與改善
v2.1.02026-03-16
  • 新功能HTML 程式碼檢視的格式化/原始碼切換
  • 改進從程式碼面板複製現在一律提供乾淨的未格式化 HTML
v2.0.02026-03-16
  • 新功能歡迎使用 Publish Helper — 內容編輯者的免費線上工具
  • 改進改善搜尋引擎能見度
v1.1.02026-03-16
  • 改進剪貼簿複製 — 乾淨的 HTML 輸出與程式碼檢視一致
v1.0.02026-03-16
  • 新功能支援 Google Docs 貼上的所見即所得編輯器
  • 新功能HTML 清理:移除樣式、類別、空標籤及 Google Docs 殘留
  • 新功能從文字前綴轉換為正確的 HTML 標題標籤
  • 新功能尋找與取代,支援正則表達式及可儲存預設
  • 新功能語法高亮 HTML 預覽,一鍵複製