Chat with Markdown
A chat UI that renders markdown in messages, via Marked.
Requires Bootstrap 5, Marked. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script><div class="card border-0 shadow-sm" style="max-width:340px"><div class="card-header bg-primary text-white py-2 small fw-bold">Assistant</div>
<div class="card-body small" id="cmBody" style="height:160px;overflow:auto"><div class="bg-light rounded p-2 mb-2">Ask me anything. I render **markdown**!</div></div>
<div class="card-footer p-2"><div class="input-group input-group-sm"><input class="form-control" id="cmInput" placeholder="Type… (try **bold**)"><button class="btn btn-primary" id="cmSend">→</button></div></div></div>var body=document.getElementById('cmBody'),inp=document.getElementById('cmInput');
function send(){if(!inp.value.trim())return;var m=document.createElement('div');m.className='bg-primary text-white rounded p-2 mb-2 ms-auto';m.style.maxWidth='80%';m.innerHTML=marked.parseInline(inp.value);body.appendChild(m);var v=inp.value;inp.value='';body.scrollTop=body.scrollHeight;setTimeout(function(){var r=document.createElement('div');r.className='bg-light rounded p-2 mb-2';r.innerHTML=marked.parseInline('You said: *'+v.replace(/[*_`]/g,'')+'*');body.appendChild(r);body.scrollTop=body.scrollHeight},600)}
document.getElementById('cmSend').onclick=send;inp.addEventListener('keydown',function(e){if(e.key==='Enter')send()});Free to use.This component uses Bootstrap 5, Marked (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.