improve: html highlighting
This commit is contained in:
parent
5e10723021
commit
bdbefad18b
|
|
@ -194,16 +194,32 @@
|
|||
);
|
||||
}
|
||||
|
||||
function highlightXml(str) {
|
||||
return escapeHtml(str)
|
||||
.replace(/<(\/?)([\w:-]+)/g, '<$1<span class="text-red-400">$2</span>')
|
||||
.replace(/([\w:-]+)(=)("[^&]*")/g, '<span class="text-yellow-400">$1</span>$2<span class="text-green-400">$3</span>');
|
||||
function highlightHtml(str) {
|
||||
const esc = escapeHtml(str);
|
||||
return esc
|
||||
// Comments: <!-- ... -->
|
||||
.replace(/<!--[\s\S]*?-->/g, '<span class="text-gray-600">$&</span>')
|
||||
// DOCTYPE
|
||||
.replace(/<!(DOCTYPE[^&]*?)>/gi, '<!<span class="text-gray-500">$1</span>>')
|
||||
// Tags: <tagname and </tagname
|
||||
.replace(/<(\/?)([\w:-]+)/g, '<span class="text-gray-500"><$1</span><span class="text-red-400">$2</span>')
|
||||
// Closing > and />
|
||||
.replace(/(\/?)\s*>/g, '<span class="text-gray-500">$1></span>')
|
||||
// Attributes: name="value" or name='value'
|
||||
.replace(/([\w:-]+)(=)("[^&]*?"|'[^&]*?')/g,
|
||||
'<span class="text-yellow-400">$1</span><span class="text-gray-500">$2</span><span class="text-green-400">$3</span>')
|
||||
// Boolean/valueless attributes (standalone word between tag name and >)
|
||||
.replace(/(<\/span>)\s+([\w:-]+)(?=\s|<span class="text-gray-500">)/g,
|
||||
'$1 <span class="text-yellow-400">$2</span>')
|
||||
// Inline CSS: style content between quotes (already green, make more specific)
|
||||
// Entity references: & < etc
|
||||
.replace(/&[\w#]+;/g, '<span class="text-purple-400">$&</span>');
|
||||
}
|
||||
|
||||
function highlightBody(body, contentType) {
|
||||
const ct = (contentType || '').toLowerCase();
|
||||
if (ct.includes('json')) return highlightJson(body);
|
||||
if (ct.includes('xml') || ct.includes('html')) return highlightXml(body);
|
||||
if (ct.includes('xml') || ct.includes('html')) return highlightHtml(body);
|
||||
return escapeHtml(body);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue