--- name: html_formatter description: Converts plain text files into HTML fragments compatible with WordPress Custom HTML blocks. --- # HTML Formatter for WordPress This skill converts plain text files into beautifully styled HTML suitable for pasting directly into a WordPress "Custom HTML" block or code editor. It handles paragraph wrapping, heading detection, and applies professional CSS styling. ## Features ✨ **Professional CSS Styling**: Inline CSS styles for modern typography and readability 📦 **Wrapper Container**: Optional div wrapper with scoped styles 🎨 **Customizable**: Control styles, wrapper, and CSS class names 🔒 **WordPress Compatible**: Works perfectly with WordPress Custom HTML blocks 🛡️ **Safe**: HTML special characters are properly escaped ## Usage ### 1. Basic Usage (with styles) Run the Python script to convert your text file with default styling: ```bash python .agent\/skills\/html_formatter\/scripts\/format_html.py --out ``` ### 2. Command-Line Options **Required:** - `input_file`: Path to the source text file. **Optional:** - `--out`, `-o`: Path to save the generated HTML file. If omitted, prints to console. - `--no-styles`: Disable inline CSS styles (generates plain HTML). - `--no-wrapper`: Don't wrap content in a container div. - `--class `: Custom CSS class name for wrapper div (default: `formatted-content`). ### 3. Usage Examples **Default (with styles and wrapper):** ```bash python .agent\/skills\/html_formatter\/scripts\/format_html.py input.txt -o output.html ``` **Plain HTML without styles:** ```bash python .agent\/skills\/html_formatter\/scripts\/format_html.py input.txt -o output.html --no-styles ``` **With custom CSS class:** ```bash python .agent\/skills\/html_formatter\/scripts\/format_html.py input.txt -o output.html --class my-article ``` **Without wrapper div:** ```bash python .agent\/skills\/html_formatter\/scripts\/format_html.py input.txt -o output.html --no-wrapper ``` ### 4. Formatting Rules Applied - **Paragraphs**: Blocks of text separated by double newlines (`\n\n`) are wrapped in `

` tags with professional styling. - **Headings**: Lines starting with `#` are converted to headings (e.g., `# Title` -> `

`, `## Subtitle` -> `

`). - CSS Styles: Inline styles include modern typography, proper spacing, and visual hierarchy. - Safety: Special characters (`<`, `>`, `&`) are escaped to prevent broken HTML. ### 5. CSS Styling Details The default styles include: - Typography: Modern font stack (Inter, Segoe UI, Roboto) - Readability: Optimized line height (1.8) and font sizes - Hierarchy: Progressive heading sizes with proper margins - Visual Polish: H2 headings include subtle bottom borders - Container: Max-width 800px, centered with padding ## Example ### Input (`draft.txt`): ```text # My Article Title This is the first paragraph with important content. ## Section 1 Here is another paragraph with more details. ### Subsection Additional information here. ``` ### Command: ```bash python .agent\/skills\/html_formatter\/scripts\/format_html.py draft.txt -o article.html ``` ### Output (`article.html`): ```html

My Article Title<\/h1>
This is the first paragraph with important content.<\/p>
Section 1<\/h2>
Here is another paragraph with more details.<\/p>
Subsection<\/h3>
Additional information here.<\/p> <\/div> ``` ## WordPress Integration Simply copy the generated HTML and paste it into a Custom HTML block in WordPress. The inline styles ensure your content looks professional without conflicting with your theme's CSS.

`, `## Subtitle` -> `

My Article Title<\/h1> This is the first paragraph with important content.<\/p>

Section 1<\/h2> Here is another paragraph with more details.<\/p>

Subsection<\/h3> Additional information here.<\/p> <\/div> ``` ## WordPress Integration Simply copy the generated HTML and paste it into a **Custom HTML** block in WordPress. The inline styles ensure your content looks professional without conflicting with your theme's CSS.

My Article Title<\/h1>
This is the first paragraph with important content.<\/p>

Section 1<\/h2>
Here is another paragraph with more details.<\/p>

Subsection<\/h3>
Additional information here.<\/p> <\/div> ``` ## WordPress Integration Simply copy the generated HTML and paste it into a Custom HTML block in WordPress. The inline styles ensure your content looks professional without conflicting with your theme's CSS.