Embed custom HTML directly in your markdown files for advanced layouts and interactive elements.

Embed HTML in your content

4567 supports raw HTML inside your markdown files. This gives you full control over layout, styling, and even interactive elements.

Basic usage

Simply add HTML anywhere in your project.md file:

---
title: "My Project"
---

Regular markdown paragraph here.

<div class="custom-section">
  <h2>Custom HTML Section</h2>
  <p>This uses raw HTML for custom formatting.</p>
</div>

More markdown content below...

What you can do

Custom layouts:

<div style="display: flex; gap: 20px;">
  <div style="flex: 1;">
    <h3>Left Column</h3>
    <p>Content here...</p>
  </div>
  <div style="flex: 1;">
    <h3>Right Column</h3>
    <p>More content...</p>
  </div>
</div>

Styled elements:

<div style="background: #f0f0f0; padding: 20px; border-radius: 8px;">
  <h3 style="margin-top: 0;">Highlighted Section</h3>
  <p>Important information in a styled box.</p>
</div>

Embedded content:

<iframe 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  width="100%" 
  height="400" 
  frameborder="0" 
  allowfullscreen>
</iframe>

Call-to-action buttons:

<a href="https://example.com" style="display: inline-block; background: #0066cc; color: white; padding: 12px 24px; text-decoration: none; border-radius: 4px;">
Visit Live Site
</a>

Works everywhere

• HTML renders in live preview
• Preserved in static export
• Works on all project pages, main.md, and about.md

Tips

• Keep it semantic — Use appropriate HTML elements
• Inline styles — Easiest way to style custom elements
• Test responsiveness — Make sure custom HTML works on mobile
• Don't overdo it — Markdown is simpler for basic formatting