snxraven/LinkUp-P2P-Chat
1
1
Fork 2
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Adding syntax highlights

Browse Source
This commit is contained in:
Raven Scott 2024-06-10 16:32:52 -04:00
parent 4fbbc73527
commit 3a0af4ace2
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app.js
View File

@ -162,6 +162,11 @@ async function initialize() {
swarm.on('close', () => { swarm.on('close', () => {
console.log('Swarm closed'); console.log('Swarm closed');
}); });
// Initialize highlight.js once the DOM is fully loaded
document.addEventListener("DOMContentLoaded", (event) => {
hljs.highlightAll();
});
} }
function registerUser(e) { function registerUser(e) {
@ -408,7 +413,17 @@ function onMessageAdded(from, message, avatar) {
const $text = document.createElement('div'); const $text = document.createElement('div');
$text.classList.add('message-text'); $text.classList.add('message-text');
const md = window.markdownit(); const md = window.markdownit({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(str, { language: lang }).value;
} catch (__) {}
}
return ''; // use external default escaping
}
});
const markdownContent = md.render(message); const markdownContent = md.render(message);
$text.innerHTML = markdownContent; $text.innerHTML = markdownContent;

2
index.html
View File

@ -7,6 +7,8 @@
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<script type="module" src="./app.js"></script> <script type="module" src="./app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
</head> </head>
<body> <body>
<header> <header>