RCP-002-001-003-DOC-TO-HTML

Converts TXT or DOCX files into platform-compatible HTML with inline CSS styling. Auto-detects content structure and applies consistent formatting with percentage-based widths for responsive display. Supports multiple color schemes and custom styling options.
Recipe Name: RCP-002-001-003-DOC-TO-HTML – Document to HTML Formatter
RCP-002-001-003-DOC-TO-HTML
Converts TXT or DOCX files into platform-compatible HTML
with inline CSS styling. Auto-detects content structure
and applies consistent formatting with percentage-based
widths for responsive display. Supports multiple color
schemes and custom styling options.
Print Recipe
Multi-Recipe Combo Stage Single Recipe
Recipe Category CFT-FWK-COOKBK-BLOGGING-AND-CONTENT – Blogging and Content
Recipe Subcategory Blogging with A.I., Brainstorming with A.I.
Recipe Difficulty Easy
Recipe Tag: Foundational | Introduced in the POC

How To Start
 

STEP 1: PREPARE YOUR DOCUMENT
  • Gather the following before running this recipe:
    – TXT or DOCX file to convert
    – Preferred color scheme (bootstrap, minimal, custom)
    – Your domain name for internal link detection
STEP 2: EXECUTE THE RECIPE
  • Copy the recipe code from the Actual Recipe Code field
    and paste it into your AI assistant. Attach your
    document file when prompted.
STEP 3: REVIEW OUTPUT
  • The recipe will produce HTML with:
    – Inline CSS styling (no external stylesheets)
    – Percentage-based widths for responsive display
    – Properly formatted headings, lists, tables, code
    – Internal/external link differentiation
STEP 4: USE THE HTML
  • Copy the generated HTML into your website platform
    content block or HTML widget. The inline styling
    ensures compatibility across platforms.

When to Use This Recipe

Use this recipe when you need to convert a document into
HTML for web publishing. Ideal for blog posts, documentation,
or marketing content that needs platform-independent HTML
with inline styling. Works with any CMS or website builder.

Recipe FAQ

Q: Why does this recipe use inline CSS instead of external
stylesheets?
A: Many website platforms restrict external CSS files or
strip stylesheet references from pasted content. Inline
CSS ensures your formatting survives when copied into
WordPress, Squarespace, Medium, or any CMS content block.
The output works immediately without additional setup.
Q: What is the internal_domain parameter used for?
A: This parameter tells the recipe which links point to
your own website. Internal links display as clean text
with dotted underlines, while external links show the
full URL in parentheses and open in new tabs. Enter your
domain (example: yourdomain.com) to enable automatic
link differentiation.
Q: Why must all widths use percentages instead of pixels?
A: Percentage-based widths ensure content displays correctly
on any screen size. Fixed pixel widths (like max-width:
900px) can cause horizontal scrolling on mobile devices
or waste space on large monitors. The recipe enforces
responsive design through percentage-only width rules.
Q: What content types can the recipe auto-detect?
A: The recipe identifies headings (based on formatting
patterns), bulleted and numbered lists, code blocks
(indented or marked content), tables, blockquotes,
before/after comparisons, and callout boxes. Set
content_type to auto-detect for automatic recognition,
or specify blog, documentation, or marketing for
type-specific formatting hints.
Q: Which color scheme should I choose?
A: “Bootstrap” provides familiar professional colors based
on the Bootstrap framework, suitable for most business
content. “Minimal” uses grayscale tones for a clean,
understated appearance. “Custom” allows you to specify
exact hex codes via the custom_colors parameter. Match
your website’s existing color palette when possible.
Q: How are images handled in the output?
A: The recipe creates placeholder boxes for images with
dashed borders and descriptive text. These placeholders
show where to insert your actual images and what content
they should contain. Replace placeholders with your
final images after copying the HTML to your platform.

Actual Recipe Code

(Copy This Plaintext Code To Use)
# ===========================================================
# RECIPE START: RCP-002-001-003-DOC-TO-HTML-v2.00a
# ===========================================================
# Title: Document to HTML Formatter
# Cookbook: CFT-FWK-COOKBK-BLOGGING-AND-CONTENT
# Category: CAT-002-BLOGGING-AND-CONTENT
# Subcategory: SUBCAT-001-DOCUMENT-CONVERSION
# Difficulty: Intermediate
# Version: 2.00a
# ===========================================================
DOC_TO_HTML = Recipe(
recipe_id="RCP-002-001-003-DOC-TO-HTML-v2.00a",
title="Document to HTML Formatter",
description="Converts TXT or DOCX files into platform-
compatible HTML with inline CSS styling, auto-
detecting content structure and applying consistent
formatting with percentage-based widths.",
category="CAT-002",
subcategory="SUBCAT-001",
difficulty="Intermediate",
parameters={
"input_file": {
"type": "string",
"required": True,
"description": "TXT or DOCX filename to convert"
},
"content_type": {
"type": "string",
"required": False,
"default": "auto-detect",
"options": [
"auto-detect",
"blog",
"documentation",
"marketing"
],
"description": "Content type for styling hints"
},
"color_scheme": {
"type": "string",
"required": False,
"default": "bootstrap",
"options": ["bootstrap", "minimal", "custom"],
"description": "Color scheme to apply"
},
"custom_colors": {
"type": "dict",
"required": False,
"default": {},
"description": "Custom colors if scheme is custom"
},
"content_padding": {
"type": "string",
"required": False,
"default": "20px",
"description": "Padding around content"
},
"internal_domain": {
"type": "string",
"required": False,
"default": "",
"description": "Your domain for link detection"
},
"add_disclaimer": {
"type": "boolean",
"required": False,
"default": False,
"description": "Add disclaimer for examples"
}
},
prompt_template=TEMPLATE_BELOW
)
# ———————————————————–
# TEMPLATE START
# ———————————————————–
#H->AI::Directive: (Convert {input_file} to HTML with
inline CSS)
#H->AI::Context: (No headers/footers, no external CSS,
no font changes except code blocks, use percentages)
#H->AI::Constraint: (Follow link rules: shorten internal,
show full URL for external)
# ===========================================================
# STEP 0: COLOR SCHEME SETUP
# ===========================================================
IF {color_scheme} == "bootstrap":
colors = {
"primary": "#0d6efd",
"secondary": "#6c757d",
"success": "#198754",
"danger": "#dc3545",
"warning": "#ffc107",
"info": "#0dcaf0",
"dark": "#212529",
"light": "#f8f9fa",
"text": "#212529",
"text-muted": "#6c757d",
"border": "#dee2e6",
"code-bg": "#f8f9fa",
"link": "#0d6efd",
"link-hover": "#0a58ca"
}
ELIF {color_scheme} == "minimal":
colors = {
"primary": "#333333",
"secondary": "#666666",
"text": "#212529",
"text-muted": "#6c757d",
"border": "#e9ecef",
"code-bg": "#f8f9fa",
"link": "#333333",
"link-hover": "#000000"
}
ELSE:
colors = {custom_colors}
# ===========================================================
# STEP 1: READ AND ANALYZE CONTENT
# ===========================================================
#AI->H::Status: (Reading {input_file} and detecting structure)
Detect and categorize elements:
– Headings (H1, H2, H3, etc.)
– Paragraphs
– Lists (ordered and unordered)
– Code blocks (with language detection)
– Blockquotes
– Tables
– Links (internal vs external)
– Emphasis (bold, italic)
# ===========================================================
# STEP 2: HTML STRUCTURE CREATION
# ===========================================================
Base container (no max-width, uses full available width):
<div style="width: 100%; padding: {content_padding};
color: {colors.text};">
# ===========================================================
# STEP 3: ELEMENT FORMATTING RULES
# ===========================================================
HEADINGS:
H1: style="color: {colors.dark}; margin-top: 0;
margin-bottom: 30px; padding-bottom: 15px;
border-bottom: 3px solid {colors.primary};"
H2: style="color: {colors.dark}; margin-top: 40px;
margin-bottom: 20px; padding-bottom: 10px;
border-bottom: 2px solid {colors.border};"
H3: style="color: {colors.dark}; margin-top: 30px;
margin-bottom: 15px;"
H4: style="color: {colors.secondary}; margin-top: 25px;
margin-bottom: 10px;"
PARAGRAPHS:
style="margin-bottom: 20px; line-height: 1.6;"
LISTS:
UL/OL: style="margin-bottom: 20px; padding-left: 30px;
line-height: 1.8;"
LI: style="margin-bottom: 8px;"
CODE BLOCKS:
<pre style="background-color: {colors.code-bg};
border: 1px solid {colors.border};
border-radius: 4px; padding: 15px;
overflow-x: auto; margin-bottom: 20px;">
<code style="font-family: 'Courier New', monospace;
font-size: 14px; color: {colors.dark};">
[code content]
</code>
</pre>
INLINE CODE:
<code style="background-color: {colors.code-bg};
padding: 2px 6px; border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 90%; color: {colors.danger};">
[code]
</code>
BLOCKQUOTES:
<blockquote style="border-left: 4px solid
{colors.primary}; padding-left: 20px;
margin: 20px 0; color: {colors.secondary};
font-style: italic;">
[quoted text]
</blockquote>
CALLOUT BOXES:
<div style="background-color: {colors.light};
border-left: 4px solid {colors.info};
padding: 20px; margin: 20px 0;
border-radius: 4px;">
<div style="font-weight: bold;
color: {colors.info};
margin-bottom: 10px;">Note:</div>
<div>[callout content]</div>
</div>
TABLES (percentage widths):
<table style="width: 100%; border-collapse: collapse;
margin-bottom: 20px;">
<thead>
<tr style="border-bottom: 2px solid
{colors.border};">
<th style="padding: 12px;
text-align: left; font-weight: bold;
color: {colors.dark}; width: 50%;">
[header]
</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid
{colors.border};">
<td style="padding: 12px; width: 50%;">
[cell content]
</td>
</tr>
</tbody>
</table>
DISCLAIMER (if add_disclaimer is True):
<div style="background-color: #F0F8FF;
border-left: 4px solid #17A2B8;
padding: 15px; margin-bottom: 25px;">
<p style="font-size: 14px; line-height: 1.6;
margin: 0; font-style: italic;">
<strong>Note:</strong> The following examples
are illustrative use cases. Actual results
may vary based on implementation details.
</p>
</div>
LINKS:
IF link contains {internal_domain}:
<a href="[url]" style="color: {colors.link};
text-decoration: none;
border-bottom: 1px dotted {colors.link};">
[text only]
</a>
ELSE (external link):
<a href="[url]" style="color: {colors.link};
text-decoration: none;
border-bottom: 1px dotted {colors.link};"
target="_blank">
[text] ([full URL])
</a>
IMAGES (placeholder):
<div style="background-color: {colors.light};
border: 2px dashed {colors.border};
padding: 40px; text-align: center;
margin: 20px 0; border-radius: 4px;">
<div style="color: {colors.secondary};
font-size: 18px;">Image Placeholder</div>
<div style="color: {colors.text-muted};
margin-top: 10px;">
[image description or alt text]
</div>
</div>
EMPHASIS:
Bold: <strong style="font-weight: bold;
color: {colors.dark};">[text]</strong>
Italic: <em style="font-style: italic;">[text]</em>
# ===========================================================
# STEP 4: SPECIAL FORMATTING PATTERNS
# ===========================================================
Detect and apply special formatting for:
BEFORE/AFTER COMPARISONS (percentage-based):
<div style="display: table; width: 100%;
margin: 20px 0;">
<div style="display: table-cell; width: 48%;
padding-right: 2%; vertical-align: top;">
<div style="background-color: #fff5f5;
border: 2px solid {colors.danger};
border-radius: 4px; padding: 15px;">
<div style="font-weight: bold;
color: {colors.danger};
margin-bottom: 10px;">Before:</div>
[before content]
</div>
</div>
<div style="display: table-cell; width: 48%;
padding-left: 2%; vertical-align: top;">
<div style="background-color: #f0f9ff;
border: 2px solid {colors.success};
border-radius: 4px; padding: 15px;">
<div style="font-weight: bold;
color: {colors.success};
margin-bottom: 10px;">After:</div>
[after content]
</div>
</div>
</div>
THREE-COLUMN LAYOUT (percentage-based):
<div style="display: table; width: 100%;
margin: 20px 0;">
<div style="display: table-cell; width: 32%;
padding-right: 2%;">
[column 1 content]
</div>
<div style="display: table-cell; width: 32%;
padding: 0 1%;">
[column 2 content]
</div>
<div style="display: table-cell; width: 32%;
padding-left: 2%;">
[column 3 content]
</div>
</div>
KEY POINTS/HIGHLIGHTS:
<div style="background-color: rgba(255, 193, 7, 0.1);
border-left: 4px solid {colors.warning};
padding: 15px; margin: 20px 0;">
<strong>Key Point:</strong> [important text]
</div>
# ===========================================================
# STEP 5: RESPONSIVE CONSIDERATIONS
# ===========================================================
IMPORTANT: All width specifications must use percentages:
Full width: width: 100%
Half width: width: 48% (with 2% padding between)
Third width: width: 32% (with 2% padding between)
Quarter width: width: 23% (with 2.67% padding between)
Never use fixed pixel widths like:
max-width: 900px (NOT ALLOWED)
width: 600px (NOT ALLOWED)
min-width: 400px (NOT ALLOWED)
# ===========================================================
# STEP 6: FINAL ASSEMBLY
# ===========================================================
#AI->H::Status: (Assembling final HTML output)
ASSEMBLY CHECKLIST:
1. Apply consistent spacing throughout
2. Ensure no font family changes except code blocks
3. Verify all links follow internal/external rules
4. Check color consistency
5. Validate all widths use percentages
6. Ensure table-based layouts for multi-column
OUTPUT FORMAT:
<div style="width: 100%; padding: {content_padding};
color: {colors.text};">
[formatted content]
</div>
#AI->H::Note: (HTML output complete and ready for use)
#H->AI::OnError: (If file cannot be read, request manual
paste of content)
# ———————————————————–
# TEMPLATE END
# ———————————————————–
# ===========================================================
# RECIPE END: RCP-002-001-003-DOC-TO-HTML-v2.00a
# ===========================================================

Similar Posts

Leave a Reply