Update index.html

This commit is contained in:
Saifeddine ALOUI
2025-01-24 17:08:33 +01:00
committed by GitHub
parent f30831dc9d
commit 6e58d0bf1d

View File

@@ -7,6 +7,11 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-css.min.js"></script>
<style> <style>
body { body {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
@@ -24,10 +29,52 @@
border-color: #3b82f6; border-color: #3b82f6;
background-color: #eff6ff; background-color: #eff6ff;
} }
/* Code block styling */
pre {
background: #f4f4f4;
border-radius: 0.5rem;
padding: 1rem;
overflow-x: auto;
margin: 1rem 0;
}
code {
font-family: 'Fira Code', monospace;
font-size: 0.9em;
}
/* Inline code styling */
:not(pre) > code {
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 0.3em;
font-size: 0.9em;
}
/* Prose modifications for better markdown rendering */
.prose pre {
background: #f4f4f4;
padding: 1rem;
border-radius: 0.5rem;
margin: 1rem 0;
}
.prose code {
color: #374151;
background: #f4f4f4;
padding: 0.2em 0.4em;
border-radius: 0.3em;
font-size: 0.9em;
}
.prose {
max-width: none;
}
</style> </style>
</head> </head>
<body class="bg-slate-50 min-h-screen p-4"> <body class="bg-slate-50 min-h-screen p-4">
<div class="max-w-4xl mx-auto"> <div class="max-w-7xl mx-auto">
<!-- Main Container --> <!-- Main Container -->
<div class="bg-white shadow-lg rounded-xl p-8 relative"> <div class="bg-white shadow-lg rounded-xl p-8 relative">
<!-- Top Navigation --> <!-- Top Navigation -->
@@ -384,12 +431,22 @@
// Format and display the response // Format and display the response
if (data.response) { if (data.response) {
// Use marked.js to render markdown const formattedResponse = marked.parse(data.response, {
highlight: function(code, lang) {
if (Prism.languages[lang]) {
return Prism.highlight(code, Prism.languages[lang], lang);
}
return code;
}
});
queryResponse.innerHTML = ` queryResponse.innerHTML = `
<div class="prose prose-slate max-w-none"> <div class="prose prose-slate max-w-none">
${marked.parse(data.response)} ${formattedResponse}
</div> </div>
`; `;
// Re-trigger Prism highlighting
Prism.highlightAllUnder(queryResponse);
} else { } else {
queryResponse.innerHTML = '<p class="text-slate-600">No response data received</p>'; queryResponse.innerHTML = '<p class="text-slate-600">No response data received</p>';
} }