src/html/messages.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Message Archive</title>
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="/syntax-highlight.css">
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body>
    <div class="header">
        <h4>Archived Messages: <%= messages.length %></h4>
        <a href="https://discord.com/channels/<%= guildId %>/<%= channelId %>" target="_blank">View Channel on Discord</a>
    </div>
    <hr>
    <br>

    <% for (let i = 0, message = messages[i]; i < messages.length; i++, message = messages[i]) { %>
        <pre><span class="header-text">From:</span> <a target="_blank" class="username-text" href="https://discord.com/users/<%= message.userId %>">@<%= message.username %><%= message.isBot ? "[bot]" : "" %></a>
<span class="header-text">Date:</span> <span class="date-text"><%= message.timestamp ? new Date(message.timestamp).toUTCString() : "(unknown)" %></span>

</pre>
        <pre class="message-content"><%= message.content %></pre>
        <% if (i < messages.length - 1) { %>
            <hr class="message-divider">
        <% } %>
    <% } %>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            for (const contentElement of [...(document.querySelectorAll('.message-content') ?? [])]) {
                let content = contentElement.textContent;
                const allMarkdownCodeBlocks = content.match(/```(.+?)```/gs);

                if (allMarkdownCodeBlocks) {
                    allMarkdownCodeBlocks.forEach(codeBlock => {
                        const language = codeBlock.match(/```(.+?)\n/)?.[1] ?? "";
                        const code = codeBlock.replace(/```(.+?)\n/, "");

                        content = content.replace(
                            codeBlock,
                            `<code class="hljs ${language}">${hljs.highlight(code.replace(/```$/, ''), { language }).value}</code>`
                        );
                    });
                }

                contentElement.innerHTML = content;
            }

            hljs.highlightAll();
        });
    </script>
</body>
</html>
1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Message Archive</title>
7	<link rel="stylesheet" href="/style.css">
8	<link rel="stylesheet" href="/syntax-highlight.css">
9	<script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
10	</head>
11	<body>
12	<div class="header">
13	<h4>Archived Messages: <%= messages.length %></h4>
14	<a href="https://discord.com/channels/<%= guildId %>/<%= channelId %>" target="_blank">View Channel on Discord</a>
15	</div>
16	<hr>
17	<br>
18
19	<% for (let i = 0, message = messages[i]; i < messages.length; i++, message = messages[i]) { %>
20	<pre><span class="header-text">From:</span> <a target="_blank" class="username-text" href="https://discord.com/users/<%= message.userId %>">@<%= message.username %><%= message.isBot ? "[bot]" : "" %></a>
21	<span class="header-text">Date:</span> <span class="date-text"><%= message.timestamp ? new Date(message.timestamp).toUTCString() : "(unknown)" %></span>
22
23	</pre>
24	<pre class="message-content"><%= message.content %></pre>
25	<% if (i < messages.length - 1) { %>
26	<hr class="message-divider">
27	<% } %>
28	<% } %>
29
30	<script>
31	document.addEventListener('DOMContentLoaded', () => {
32	for (const contentElement of [...(document.querySelectorAll('.message-content') ?? [])]) {
33	let content = contentElement.textContent;
34	const allMarkdownCodeBlocks = content.match(/```(.+?)```/gs);
35
36	if (allMarkdownCodeBlocks) {
37	allMarkdownCodeBlocks.forEach(codeBlock => {
38	const language = codeBlock.match(/```(.+?)\n/)?.[1] ?? "";
39	const code = codeBlock.replace(/```(.+?)\n/, "");
40
41	content = content.replace(
42	codeBlock,
43	`<code class="hljs ${language}">${hljs.highlight(code.replace(/```$/, ''), { language }).value}</code>`
44	);
45	});
46	}
47
48	contentElement.innerHTML = content;
49	}
50
51	hljs.highlightAll();
52	});
53	</script>
54	</body>
55	</html>