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
39 lines (38 loc) • 1.34 kB
JavaScript
var g = Object.defineProperty;
var p = (l, t, s) => t in l ? g(l, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : l[t] = s;
var a = (l, t, s) => p(l, typeof t != "symbol" ? t + "" : t, s);
class n {
constructor() {
a(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, e, r, o) => {
const c = r.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}">${e}</span>${c}<span style="color: ${this.colors.tag}">${o}</span>`;
}).replace(
/(<\/?[a-zA-Z0-9-]+\/?>)/g,
`<span style="color: ${this.colors.tag}">$1</span>`
);
}
}
export {
n as HTMLHighlighter
};