<!-- YAML Formatter Tool - Copy everything below into your WordPress page (HTML block) --> <style> #yamlf-root *,<br /> #yamlf-root *::before,<br /> #yamlf-root *::after {<br /> box-sizing: border-box !important;<br /> margin: 0 !important;<br /> padding: 0 !important;<br /> font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;<br /> line-height: 1.5 !important;<br /> }<br /> #yamlf-root {<br /> max-width: 940px !important;<br /> margin: 0 auto !important;<br /> padding: 28px 0px !important;<br /> background: #ffffff !important;<br /> border-radius: 12px !important;<br /> color: #1e293b !important;<br /> font-size: 15px !important;<br /> }<br /> #yamlf-root .yamlf-title {<br /> font-size: 24px !important;<br /> font-weight: 700 !important;<br /> color: #1e293b !important;<br /> margin-bottom: 20px !important;<br /> text-align: center !important;<br /> letter-spacing: -0.3px !important;<br /> }<br /> #yamlf-root .yamlf-title .yamlf-title-accent {<br /> color: #4150F6 !important;<br /> }<br /> #yamlf-root .yamlf-section-label {<br /> font-size: 13px !important;<br /> font-weight: 600 !important;<br /> color: #64748b !important;<br /> text-transform: uppercase !important;<br /> letter-spacing: 0.5px !important;<br /> margin-bottom: 6px !important;<br /> display: block !important;<br /> }<br /> #yamlf-root .yamlf-section-hint {<br /> font-weight: 400 !important;<br /> color: #94a3b8 !important;<br /> text-transform: none !important;<br /> letter-spacing: 0 !important;<br /> font-size: 13px !important;<br /> }<br /> #yamlf-root .yamlf-textarea-wrap {<br /> position: relative !important;<br /> border: 1.5px solid #e2e8f0 !important;<br /> border-radius: 8px !important;<br /> overflow: hidden !important;<br /> transition: border-color 0.2s ease !important;<br /> background: #f8fafc !important;<br /> margin-bottom: 14px !important;<br /> }<br /> #yamlf-root .yamlf-textarea-wrap:focus-within {<br /> border-color: #4150F6 !important;<br /> box-shadow: 0 0 0 3px rgba(65,80,246,0.08) !important;<br /> }<br /> #yamlf-root .yamlf-textarea-wrap.yamlf-dragover {<br /> border-color: #4150F6 !important;<br /> background: rgba(65,80,246,0.03) !important;<br /> }<br /> #yamlf-root .yamlf-textarea {<br /> width: 100% !important;<br /> min-height: 140px !important;<br /> max-height: 200px !important;<br /> padding: 10px 14px !important;<br /> border: none !important;<br /> outline: none !important;<br /> resize: vertical !important;<br /> font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace !important;<br /> font-size: 13px !important;<br /> line-height: 1.6 !important;<br /> color: #334155 !important;<br /> background: transparent !important;<br /> tab-size: 2 !important;<br /> }<br /> #yamlf-root .yamlf-textarea::placeholder {<br /> color: #b0bec5 !important;<br /> }<br /> #yamlf-root .yamlf-btn-row {<br /> display: flex !important;<br /> flex-wrap: wrap !important;<br /> gap: 8px !important;<br /> margin-bottom: 12px !important;<br /> align-items: center !important;<br /> }<br /> #yamlf-root .yamlf-btn {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 7px 14px !important;<br /> border: none !important;<br /> border-radius: 6px !important;<br /> font-size: 13px !important;<br /> font-weight: 500 !important;<br /> cursor: pointer !important;<br /> transition: all 0.15s ease !important;<br /> white-space: nowrap !important;<br /> text-decoration: none !important;<br /> }<br /> #yamlf-root .yamlf-btn:hover {<br /> transform: translateY(-1px) !important;<br /> box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;<br /> }<br /> #yamlf-root .yamlf-btn:active {<br /> transform: translateY(0) !important;<br /> }<br /> #yamlf-root .yamlf-btn-primary {<br /> background: #4150F6 !important;<br /> color: #fff !important;<br /> }<br /> #yamlf-root .yamlf-btn-primary:hover {<br /> background: #3442d9 !important;<br /> }<br /> #yamlf-root .yamlf-btn-secondary {<br /> background: #f1f5f9 !important;<br /> color: #475569 !important;<br /> border: 1px solid #e2e8f0 !important;<br /> }<br /> #yamlf-root .yamlf-btn-secondary:hover {<br /> background: #e2e8f0 !important;<br /> }<br /> #yamlf-root .yamlf-btn-danger {<br /> background: #fee2e2 !important;<br /> color: #dc2626 !important;<br /> }<br /> #yamlf-root .yamlf-btn-danger:hover {<br /> background: #fecaca !important;<br /> }<br /> #yamlf-root .yamlf-btn-success {<br /> background: #dcfce7 !important;<br /> color: #16a34a !important;<br /> }<br /> #yamlf-root .yamlf-options-row {<br /> display: flex !important;<br /> flex-wrap: wrap !important;<br /> gap: 10px !important;<br /> align-items: center !important;<br /> margin-bottom: 16px !important;<br /> padding: 10px 14px !important;<br /> background: #f8fafc !important;<br /> border-radius: 8px !important;<br /> border: 1px solid #f1f5f9 !important;<br /> }<br /> #yamlf-root .yamlf-option-group {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> }<br /> #yamlf-root .yamlf-option-label {<br /> font-size: 13px !important;<br /> color: #64748b !important;<br /> font-weight: 500 !important;<br /> white-space: nowrap !important;<br /> }<br /> #yamlf-root .yamlf-select,<br /> #yamlf-root .yamlf-input-sm {<br /> padding: 5px 10px !important;<br /> border: 1.5px solid #e2e8f0 !important;<br /> border-radius: 6px !important;<br /> font-size: 13px !important;<br /> color: #334155 !important;<br /> background: #fff !important;<br /> outline: none !important;<br /> transition: border-color 0.2s ease !important;<br /> }<br /> #yamlf-root .yamlf-select:focus,<br /> #yamlf-root .yamlf-input-sm:focus {<br /> border-color: #4150F6 !important;<br /> }<br /> #yamlf-root .yamlf-input-sm {<br /> width: 56px !important;<br /> text-align: center !important;<br /> }<br /> #yamlf-root .yamlf-checkbox-label {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 5px !important;<br /> font-size: 13px !important;<br /> color: #64748b !important;<br /> cursor: pointer !important;<br /> white-space: nowrap !important;<br /> user-select: none !important;<br /> }<br /> #yamlf-root .yamlf-checkbox {<br /> width: 16px !important;<br /> height: 16px !important;<br /> accent-color: #4150F6 !important;<br /> cursor: pointer !important;<br /> }<br /> #yamlf-root .yamlf-divider {<br /> width: 1px !important;<br /> height: 20px !important;<br /> background: #e2e8f0 !important;<br /> margin: 0 4px !important;<br /> }<br /> #yamlf-root .yamlf-status {<br /> font-size: 13px !important;<br /> padding: 6px 12px !important;<br /> border-radius: 6px !important;<br /> margin-bottom: 12px !important;<br /> display: none !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> }<br /> #yamlf-root .yamlf-status.yamlf-show {<br /> display: flex !important;<br /> }<br /> #yamlf-root .yamlf-status-success {<br /> background: #f0fdf4 !important;<br /> color: #16a34a !important;<br /> border: 1px solid #bbf7d0 !important;<br /> }<br /> #yamlf-root .yamlf-status-error {<br /> background: #fef2f2 !important;<br /> color: #dc2626 !important;<br /> border: 1px solid #fecaca !important;<br /> }<br /> #yamlf-root .yamlf-file-input {<br /> display: none !important;<br /> }<br /> /* Responsive */<br /> @media (max-width: 768px) {<br /> #yamlf-root {<br /> padding: 20px 16px !important;<br /> border-radius: 0 !important;<br /> box-shadow: none !important;<br /> }<br /> #yamlf-root .yamlf-options-row {<br /> gap: 8px !important;<br /> padding: 8px 10px !important;<br /> }<br /> #yamlf-root .yamlf-title {<br /> font-size: 20px !important;<br /> }<br /> }<br /> @media (max-width: 480px) {<br /> #yamlf-root .yamlf-btn-row {<br /> gap: 6px !important;<br /> }<br /> #yamlf-root .yamlf-btn {<br /> padding: 6px 10px !important;<br /> font-size: 12px !important;<br /> }<br /> #yamlf-root .yamlf-option-group {<br /> flex-basis: 100% !important;<br /> }<br /> }<br /> </style> <h1>YAML Formatter</h1> <label>Input YAML (or drag & drop a .yaml/.yml file)</label> <textarea id="yamlf-input" spellcheck="false" placeholder="Enter your YAML code here..."></textarea> <button id="yamlf-format-btn">⚡ Format YAML</button> <button id="yamlf-open-btn">📂 Open File</button> <button id="yamlf-clear-btn">🗑 Clear</button> <button id="yamlf-sample-btn">📄 Sample</button> <input id="yamlf-file-input" accept=".yaml,.yml,.txt" type="file" /> Indent <select id="yamlf-indent"> <option selected="selected" value="2">2 Spaces</option> <option value="4">4 Spaces</option> <option value="8">8 Spaces</option> </select> Line Width <input id="yamlf-linewidth" max="200" min="40" type="number" value="80" /> <label> <input id="yamlf-sort" type="checkbox" /> Sort Keys </label> <label> <input id="yamlf-block" type="checkbox" /> Force Block Style </label> <label>Formatted YAML</label> <textarea id="yamlf-output" spellcheck="false" readonly="readonly" placeholder="Formatted YAML will appear here..."></textarea> <button id="yamlf-download-btn">⬇ Download</button> <button id="yamlf-copy-btn">📋 Copy</button>
