Convert Markdown files into styled, scrollable wide-screen HTML pages with dark/light themes, animations, and rich directive components for web articles.
Convert Markdown into polished, scrollable wide-screen HTML pages with built-in dark/light theme toggle.
python3 SKILL_DIR/scripts/md_to_page.py INPUT.md OUTPUT.html [options]
| Flag | Description | Default |
|---|---|---|
--embed-images | Compress local images (Pillow) and embed as base64 data URIs | off |
--title TEXT | Override HTML page title | First H1 |
--footer TEXT | Custom footer text | "Generated by md-to-page" |
inline code, links, images>, > 💡, > ⚠️)```tree
workspace/
├── SOUL.md # System prompt
├── memory/
│ └── 2026-03-01.md
└── skills/
```
Extended syntax using fenced ::: blocks for rich components.
::: card
Content with **bold** and `code`
:::
::: card-grid
::: card {icon=💬 title="Chat"}
Natural language interface
:::
::: card {icon=📄 title="Docs"}
Auto-generated documentation
:::
:::
::: compare
::: side bad {label="❌ Before"}
Manual copy-paste workflow
:::
::: side good {label="✅ After"}
Automated pipeline
:::
:::
::: flow
Write docs → AI helps write → *Store in Confluence* → AI reads → Summary
:::
*text* = highlighted step (accent border + glow)~text~ = dead/deprecated step (strikethrough + faded)→ ← rendered as connector arrowsDeprecated flow with opacity:
::: flow dead-suffix
Store in Confluence ← No longer needed
:::
::: quote
The best interface is no interface.
— Golden Krishna
:::
::: layers
Personal | Your preferences, projects, habits
Team | Onboarding, SOP, tech decisions
Organization | Company policies, cross-BU knowledge
:::
Format: Tag | Description per line. Each layer gets a distinct color (up to 4 built-in colors).
::: cycle negative
Wrote docs → Nobody updates → Outdated → Nobody reads → ↻
:::
::: cycle positive
Write to memory → AI answers → People use → AI updates → ↻
:::
Polarity: negative (pink) or positive (cyan).
::: cmd-list
/status — Check agent status
/model — Switch model
/new — Reset context
:::
Format: command — description per line, rendered in monospace with accent-colored keys.
With --embed-images, local image paths in  are:
data:image/jpeg;base64,... URIsURLs (http://, https://) are left unchanged.
Every generated page includes a 🌙/☀️ toggle button (top-right corner) that switches between dark and light themes. Theme preference is saved to localStorage.
Standard pipe tables are auto-detected and rendered as styled tables:
| Feature | Status |
|---------|--------|
| Dark mode | ✅ |
| Light mode | ✅ |
presentation-generator or slides-cogobsidian-markdownZIP package — ready to use