on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
2 lines (1 loc) • 1.17 kB
JavaScript
;var g=Object.defineProperty;var h=(l,t,s)=>t in l?g(l,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):l[t]=s;var e=(l,t,s)=>h(l,typeof t!="symbol"?t+"":t,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class i{constructor(){e(this,"colors",{tag:"#22863a",attr:"#6f42c1",string:"#032f62",comment:"#6a737d"})}highlight(t){const s=t.textContent||"";t.innerHTML=this.highlightHTML(this.escapeHtml(s))}escapeHtml(t){return t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}highlightHTML(t){return t.replace(/(<!--[\s\S]*?-->)/g,`<span style="color: ${this.colors.comment}">$1</span>`).replace(/(<\/?[a-zA-Z0-9-]+)(\s+[^&]*?)(\/?>)/g,(s,r,a,o)=>{const c=a.replace(/([a-zA-Z-]+)=(".*?"|'.*?')/g,`<span style="color: ${this.colors.attr}">$1</span>=<span style="color: ${this.colors.string}">$2</span>`);return`<span style="color: ${this.colors.tag}">${r}</span>${c}<span style="color: ${this.colors.tag}">${o}</span>`}).replace(/(<\/?[a-zA-Z0-9-]+\/?>)/g,`<span style="color: ${this.colors.tag}">$1</span>`)}}exports.HTMLHighlighter=i;