Lesson 5
Preview and HTML Export
Understand live preview, sanitized HTML fragments, and when to copy Markdown vs HTML.
Markdown tools usually offer two different outputs:
- Rendered preview for reading while you write
- HTML export for systems that need HTML fragments
They are related, but not identical.
What live preview shows
Live preview parses Markdown and renders structured content such as headings, paragraphs, lists, and tables. In browser tools, that usually means HTML elements styled with CSS.
Preview answers: “Does this document read well?”
What HTML export provides
HTML export converts Markdown into tags like:
<h1>Title</h1>
<p>Paragraph text.</p>
<ul>
<li>Item</li>
</ul>
Good tools sanitize the HTML and avoid promoting raw HTML blocks into active content.
HTML export answers: “What fragment can I paste into another system?”
When to copy Markdown vs HTML
| Destination | Better choice |
|---|---|
| GitHub README or issue | Markdown source |
Docs repo with .md files | Markdown source |
| CMS rich-text field | HTML fragment |
| Email or internal wiki | HTML fragment, often with review |
| Code review discussion | Markdown source |
Most publishing pipelines prefer Markdown because the destination applies its own theme.
Preview themes vs export
Preview styling helps you write comfortably, but copied HTML usually does not include preview theme CSS unless the tool explicitly exports styled HTML. That is normal.
Key takeaway
Use preview to validate structure and readability. Use HTML export when the next system needs semantic HTML, not Markdown source.
The Markdown Preview / Markdown to HTML tool supports both paths: live preview plus copy/download of sanitized HTML fragments.