ico
/
pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve: html highlighting

This commit is contained in:
nate 2026-03-24 18:01:41 +04:00
parent 5e10723021
commit bdbefad18b
1 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/web/src/views/detail.ejs
View File

@ -194,16 +194,32 @@
); );
} }
function highlightXml(str) { function highlightHtml(str) {
return escapeHtml(str) const esc = escapeHtml(str);
.replace(/&lt;(\/?)([\w:-]+)/g, '&lt;$1<span class="text-red-400">$2</span>') return esc
.replace(/([\w:-]+)(=)(&quot;[^&]*&quot;)/g, '<span class="text-yellow-400">$1</span>$2<span class="text-green-400">$3</span>'); // Comments: <!-- ... -->
.replace(/&lt;!--[\s\S]*?--&gt;/g, '<span class="text-gray-600">$&</span>')
// DOCTYPE
.replace(/&lt;!(DOCTYPE[^&]*?)&gt;/gi, '&lt;!<span class="text-gray-500">$1</span>&gt;')
// Tags: <tagname and </tagname
.replace(/&lt;(\/?)([\w:-]+)/g, '<span class="text-gray-500">&lt;$1</span><span class="text-red-400">$2</span>')
// Closing > and />
.replace(/(\/?)\s*&gt;/g, '<span class="text-gray-500">$1&gt;</span>')
// Attributes: name="value" or name='value'
.replace(/([\w:-]+)(=)(&quot;[^&]*?&quot;|&#39;[^&]*?&#39;)/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: &amp; &lt; etc
.replace(/&amp;[\w#]+;/g, '<span class="text-purple-400">$&</span>');
} }
function highlightBody(body, contentType) { function highlightBody(body, contentType) {
const ct = (contentType || '').toLowerCase(); const ct = (contentType || '').toLowerCase();
if (ct.includes('json')) return highlightJson(body); 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); return escapeHtml(body);
} }