/* ===== XML Formatter – Light Theme (servit.dev) ===== */ .sd-xmlfmt{ --sdxf-primary: #008fbf; --sdxf-bg: transparent; --sdxf-fg: #0f172a; --sdxf-muted: #4b5563; --sdxf-border: #e5e7eb; --sdxf-surface: #ffffff; --sdxf-surface-2: #f0f2f7; --sdxf-code: #1e293b; --sdxf-code-border: #e5e7eb; --sdxf-error-bg: #fef2f2; --sdxf-error: #dc2626; --sdxf-radius: 12px; --sdxf-pad: 16px; font-family: inherit; color: var(--sdxf-fg); background: var(--sdxf-bg); border: none; border-radius: 0; padding: 0; width: 100%; max-width: 100%; margin: 0; box-shadow: none; } .sd-xmlfmt .sd-xmlfmt__row{display:flex;gap:10px;align-items:center} .sd-xmlfmt .sd-xmlfmt__controls{flex-wrap:wrap;margin-bottom:20px;gap:8px} .sd-xmlfmt .sd-xmlfmt__label{font-size:13px;color:var(--sdxf-muted);display:flex;align-items:center;gap:6px} .sd-xmlfmt select.sd-xmlfmt__select{ padding:6px 10px;border:1px solid var(--sdxf-border) !important;background:var(--sdxf-surface) !important; color:var(--sdxf-fg) !important;border-radius:6px;outline:none;font-size:13px; line-height:1.4;height:auto;min-height:0; appearance:auto;-webkit-appearance:auto; transition:border-color .2s ease; } .sd-xmlfmt select.sd-xmlfmt__select:focus{border-color:var(--sdxf-primary) !important} .sd-xmlfmt button.sd-xmlfmt__btn{ padding:7px 16px;border:1px solid var(--sdxf-border) !important;border-radius:8px; background:var(--sdxf-surface) !important;color:var(--sdxf-fg) !important;cursor:pointer; font-size:13px;font-weight:500;line-height:1.4; box-shadow:none !important;text-transform:none;letter-spacing:0; transition:all .15s ease; } .sd-xmlfmt button.sd-xmlfmt__btn:hover{ border-color:var(--sdxf-primary) !important; color:var(--sdxf-primary) !important; background:rgba(0,143,191,.04) !important; } .sd-xmlfmt button.sd-xmlfmt__btn:active{transform:translateY(1px)} .sd-xmlfmt button.sd-xmlfmt__btn.sd-xmlfmt__btn--primary{ background:var(--sdxf-primary) !important; border-color:var(--sdxf-primary) !important; color:#ffffff !important; } .sd-xmlfmt button.sd-xmlfmt__btn.sd-xmlfmt__btn--primary:hover{ background:#2fbfef !important; border-color:#2fbfef !important; color:#ffffff !important; } .sd-xmlfmt button.sd-xmlfmt__btn.sd-xmlfmt__btn--ghost{ background:transparent !important;border-color:transparent !important;color:var(--sdxf-muted) !important; } .sd-xmlfmt button.sd-xmlfmt__btn.sd-xmlfmt__btn--ghost:hover{ color:var(--sdxf-primary) !important;background:transparent !important;border-color:transparent !important; } .sd-xmlfmt .sd-xmlfmt__spacer{flex:1} .sd-xmlfmt .sd-xmlfmt__panes{align-items:stretch} .sd-xmlfmt .sd-xmlfmt__pane{flex:1;min-width:280px;display:flex;flex-direction:column;gap:6px} .sd-xmlfmt .sd-xmlfmt__panehead{font-size:12px;font-weight:600;color:var(--sdxf-muted);letter-spacing:.02em;text-transform:uppercase} .sd-xmlfmt textarea.sd-xmlfmt__textarea{ width:100%;min-height:340px;resize:vertical;padding:var(--sdxf-pad); border-radius:var(--sdxf-radius);border:1px solid var(--sdxf-border) !important; background:var(--sdxf-surface) !important;color:var(--sdxf-fg) !important; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px;line-height:1.6;box-shadow:none !important; transition:border-color .2s ease; } .sd-xmlfmt textarea.sd-xmlfmt__textarea:focus{border-color:var(--sdxf-primary) !important;outline:none} .sd-xmlfmt .sd-xmlfmt__output{ width:100%;min-height:340px;margin:0;padding:var(--sdxf-pad); border-radius:var(--sdxf-radius);border:1px solid var(--sdxf-code-border); background:var(--sdxf-surface-2); color:var(--sdxf-code);overflow:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px;line-height:1.6;white-space:pre; } .sd-xmlfmt .sd-xmlfmt__error{ margin-top:12px;padding:12px 16px;border-radius:var(--sdxf-radius); background:var(--sdxf-error-bg);color:var(--sdxf-error);font-size:14px; border:1px solid rgba(220,38,38,.12) } /* Syntax-Highlighting – helles Theme (XML) */ .sd-xmlfmt .tok-tag{color:#0369a1} .sd-xmlfmt .tok-attr{color:#9333ea} .sd-xmlfmt .tok-str{color:#047857} .sd-xmlfmt .tok-eq{color:#9ca3af} .sd-xmlfmt .tok-comm{color:#9ca3af;font-style:italic} .sd-xmlfmt .tok-cdata{color:#b45309} .sd-xmlfmt .tok-entity{color:#6366f1} /* Mobile */ @media (max-width: 768px){ .sd-xmlfmt button.sd-xmlfmt__btn{padding:7px 12px} .sd-xmlfmt textarea.sd-xmlfmt__textarea, .sd-xmlfmt .sd-xmlfmt__output{min-height:220px} .sd-xmlfmt .sd-xmlfmt__panes{flex-direction:column} } (function(){ function qs(sel,root){return(root||document).querySelector(sel)} var root=document.getElementById('sd-xmlfmt');if(!root)return; var el={ input:qs('#sdxf-input',root), output:qs('#sdxf-output',root), error:qs('#sdxf-error',root), indent:qs('#sdxf-indent',root), sortAttrs:qs('#sdxf-sort-attrs',root), sortElems:qs('#sdxf-sort-elems',root), btnFmt:qs('#sdxf-format',root), btnMin:qs('#sdxf-minify',root), btnCopy:qs('#sdxf-copy',root), btnDl:qs('#sdxf-download',root), btnClr:qs('#sdxf-clear',root) }; function showError(m){el.error.textContent=m;el.error.hidden=false} function clearError(){el.error.hidden=true;el.error.textContent=''} function getIndent(){ var v=el.indent.value; if(v==="\\t"||v==="\t")return"\t"; if(isNaN(v))return v; return new Array(parseInt(v,10)+1).join(" "); } function parseXML(str){ var parser=new DOMParser(); var doc=parser.parseFromString(str,"application/xml"); var err=doc.getElementsByTagName("parsererror")[0]; if(err){return{doc:null,error:err.textContent.replace(/\s+/g,' ').trim()}} return{doc:doc,error:null}; } function sortAttributes(node){ if(node.nodeType===1&&node.attributes&&node.attributes.length>1){ var arr=[],i; for(i=0;i<node.attributes.length;i++){arr.push({n:node.attributes[i].name,v:node.attributes[i].value})} arr.sort(function(a,b){return a.n.localeCompare(b.n,undefined,{numeric:true,sensitivity:'base'})}); while(node.attributes.length){node.removeAttribute(node.attributes[0].name)} for(i=0;i1){ elems.sort(function(a,b){ var t=a.tagName.localeCompare(b.tagName,undefined,{numeric:true,sensitivity:'base'}); if(t!==0)return t; var ai=a.getAttribute('id')||a.getAttribute('name')||''; var bi=b.getAttribute('id')||b.getAttribute('name')||''; return ai.localeCompare(bi,undefined,{numeric:true,sensitivity:'base'}); }); for(var i=0;i<elems.length;i++){node.appendChild(elems[i])} } for(var j=0;j<children.length;j++){sortElements(children[j])} } function escapeText(s){return s.replace(/&/g,'&').replace(//g,'>')} function escapeAttr(s){return s.replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<')} function prettyPrint(node,IND,level){ var out=''; if(node.nodeType===9){ for(var ch=node.firstChild;ch;ch=ch.nextSibling){out+=prettyPrint(ch,IND,0)} return out; } if(node.nodeType===1){ var name=node.nodeName,attrs='',i; for(i=0;i0&&children.every?children.every(function(n){return n.nodeType===3}) :children.filter(function(n){return n.nodeType!==3}).length===0; var pad=new Array(level+1).join(IND); if(selfClosing){out+=pad+'\n'} else if(onlyText){ var text=children.map?children.map(function(c){return c.nodeValue}).join(''):node.textContent; out+=pad+''+escapeText(String(text).trim())+'\n'; }else{ out+=pad+'\n'; for(i=0;i<children.length;i++){out+=prettyPrint(children[i],IND,level+1)} out+=pad+'\n'; } return out; } if(node.nodeType===3){ var v=String(node.nodeValue).replace(/\s+/g,' ').trim(); if(v){out+=new Array(level+1).join(IND)+escapeText(v)+'\n'} return out; } if(node.nodeType===4){return new Array(level+1).join(IND)+'\n'} if(node.nodeType===8){return new Array(level+1).join(IND)+'\n'} if(node.nodeType===7){return new Array(level+1).join(IND)+'\n'} return out; } function minifyXML(doc){ var s=new XMLSerializer(); return s.serializeToString(doc).replace(/>\s+<').trim(); } function highlight(xml){ var esc=xml.replace(/&/g,'&').replace(//g,'>'); esc=esc.replace(/<!--([\s\S]*?)-->/g,function(_,a){return'<!--'+a+'-->'}); esc=esc.replace(/<!\[CDATA\[([\s\S]*?)\]\]>/g,function(_,a){return'<![CDATA['+a+']]>'}); esc=esc.replace(/<(\/?)([a-zA-Z_:][\w:.-]*)([^&]*?)(\s*\/?)>/g,function(_,slash,tag,rest,selfClose){ var attrs=rest.replace(/([a-zA-Z_:][\w:.-]*)(\s*=\s*)(".*?"|'.*?')/g, function(__,an,eq,av){return' '+an+''+eq+''+av+''} ); return'<'+slash+''+tag+''+attrs+selfClose+'>'; }); esc=esc.replace(/(^|[^;])&([a-zA-Z#0-9]+);/g,function(_,b1,ent){return b1+'&'+ent+';'}); return esc; } function formatXML(minify){ clearError(); var raw=el.input.value.replace(/^\uFEFF/,'').trim(); if(!raw){el.output.innerHTML='';return} var parsed=parseXML(raw); if(parsed.error){showError('XML-Fehler: '+parsed.error);return} try{ if(el.sortAttrs.checked)sortAttributes(parsed.doc); if(el.sortElems.checked)sortElements(parsed.doc); var result=minify?minifyXML(parsed.doc):prettyPrint(parsed.doc,getIndent(),0).trim(); el.output.innerHTML=highlight(result); }catch(e){ showError('Verarbeitung fehlgeschlagen: '+(e&&e.message?e.message:e)); } } el.btnFmt.addEventListener('click',function(){formatXML(false)}); el.btnMin.addEventListener('click',function(){formatXML(true)}); el.btnCopy.addEventListener('click',function(){ if(navigator.clipboard){navigator.clipboard.writeText(el.output.innerText);return} var t=document.createElement('textarea');t.value=el.output.innerText; document.body.appendChild(t);t.select();document.execCommand('copy');t.remove(); }); el.btnDl.addEventListener('click',function(){ var text=el.output.innerText||''; var blob=new Blob([text],{type:'application/xml;charset=utf-8'}); var a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='formatted.xml'; document.body.appendChild(a);a.click();a.remove();URL.revokeObjectURL(a.href); }); el.btnClr.addEventListener('click',function(){el.input.value='';el.output.innerHTML='';clearError()}); el.input.addEventListener('input',function(){ clearError(); var v=el.input.value.trim();if(!v)return; var res=parseXML(v);if(res.error)showError('Noch ungültig: '+res.error); }); el.input.addEventListener('keydown',function(ev){ if((ev.ctrlKey||ev.metaKey)&&ev.key==='Enter')formatXML(false); }); })();