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 元素。

Related Tools & Guides

Ready to clean your HTML?

Open Publish Helper

Last updated: March 2026

更新日誌

v2.2.02026-03-18
  • 新功能AI-Powered Title to SEO Slug — Convert blog titles in any language to SEO-friendly English slugs in under 10 seconds
  • 新功能Slug generator toggle on the main page — generate slugs right after editing, above the fold
  • 新功能Table support — pasted tables from Google Docs now render correctly
  • 新功能Remove <br> after headings cleanup option (on by default)
  • 新功能Partial text selection copy in the HTML code view
  • 新功能Sticky Clean HTML button at the bottom of the page
  • 改進Heading conversion now strips prefixes from existing heading tags and supports Chinese full-width colon (:)
  • 改進Shared footer across all pages
v2.1.22026-03-17
  • 修復Bug fixes and improvements
v2.1.12026-03-16
  • 修復Bug fixes and improvements
v2.1.02026-03-16
  • 新功能Formatted/Raw toggle for the HTML code view
  • 改進Copying from the code panel now always gives clean, unformatted HTML
v2.0.02026-03-16
  • 新功能Welcome to Publish Helper — free online tools for content editors
  • 改進Improved search engine visibility
v1.1.02026-03-16
  • 改進Clipboard copy — clean HTML output matches the code view
v1.0.02026-03-16
  • 新功能Rich text editor with Google Docs paste support
  • 新功能HTML cleanup: strip styles, classes, empty tags, and Google Docs artifacts
  • 新功能Heading conversion from text prefixes to proper HTML tags
  • 新功能Find & replace with regex support and saveable presets
  • 新功能Syntax-highlighted HTML preview with one-click copy