cdez/CS460-Projects
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add markdown support to the webclient

Browse source
This commit is contained in:
Charles Descamps 2025-03-28 21:08:56 -07:00
parent 88e58bb79c
commit 4b7fe624bb
2 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
chatserver/templates/index.html
View file

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Chat Client</title>
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
<style>
/* Light Mode Styles */
body.light-mode {
@ -199,7 +201,15 @@
const messageElement = document.createElement('div');
const timestamp = data.timestamp ? `[${data.timestamp}]` : '';
const chatRoomInfo = data.chat_room ? `(${data.chat_room})` : '';
messageElement.textContent = `${timestamp} ${data.username || 'Server'} ${chatRoomInfo}: ${data.message}`;
// Render the message as HTML using marked.js
const renderedMessage = marked.parse(data.message);
// Sanitize the HTML using DOMPurify
const sanitizedMessage = DOMPurify.sanitize(renderedMessage);
// Set the inner HTML of the message element
messageElement.innerHTML = `${timestamp} ${data.username || 'Server'} ${chatRoomInfo}: ${sanitizedMessage}`;
chatDiv.appendChild(messageElement);
chatDiv.scrollTop = chatDiv.scrollHeight; // Auto-scroll to the bottom
});