tacit/nanochat
1
0
Fork 0
mirror of https://github.com/karpathy/nanochat.git synced 2026-01-03 02:02:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

change in code block display

Browse Source
This commit is contained in:
Goderr 2025-10-21 20:17:03 +05:30
parent e9c5e911f6
commit a3b701af8d
1 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
nanochat/ui.html
View File

@ -279,6 +279,7 @@
border-radius: 0.5rem; border-radius: 0.5rem;
overflow-x: auto; overflow-x: auto;
margin: 0.25rem 0; margin: 0.25rem 0;
position: relative;
} }
.message-content pre code { .message-content pre code {
@ -286,6 +287,20 @@
padding: 0; padding: 0;
} }
.code-language-label {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background-color: #e5e7eb;
color: #6b7280;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
text-transform: lowercase;
font-weight: 500;
}
.message-content h1, .message-content h1,
.message-content h2, .message-content h2,
.message-content h3, .message-content h3,
@ -388,7 +403,8 @@
try { try {
if (typeof marked !== 'undefined' && typeof DOMPurify !== 'undefined') { if (typeof marked !== 'undefined' && typeof DOMPurify !== 'undefined') {
const rawHtml = marked.parse(content); const rawHtml = marked.parse(content);
return DOMPurify.sanitize(rawHtml); const sanitizedHtml = DOMPurify.sanitize(rawHtml);
return addLanguageLabels(sanitizedHtml);
} else { } else {
console.warn('Markdown libraries not loaded, falling back to plain text'); console.warn('Markdown libraries not loaded, falling back to plain text');
return escapeHtml(content); return escapeHtml(content);
@ -399,6 +415,30 @@
} }
} }
// Add language labels to code blocks
function addLanguageLabels(html) {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = html;
const codeBlocks = tempDiv.querySelectorAll('pre code');
codeBlocks.forEach(codeBlock => {
const pre = codeBlock.parentElement;
const className = codeBlock.className;
// Extract language from class (e.g., "language-javascript" -> "javascript")
const languageMatch = className.match(/language-(\w+)/);
if (languageMatch) {
const language = languageMatch[1];
const label = document.createElement('span');
label.className = 'code-language-label';
label.textContent = language;
pre.appendChild(label);
}
});
return tempDiv.innerHTML;
}
// HTML escape fallback function // HTML escape fallback function
function escapeHtml(text) { function escapeHtml(text) {
const div = document.createElement('div'); const div = document.createElement('div');