I am working on a website where a user can input a message that is sent to another user. I want to implement Markdown so the user can use markdown on the message to be able to bold the message and other markdown options. I want to implement this but I want to make sure that xss cannot happen and .innerHTML seems like it will cause issues. I am not using node. Someone suggested using https://ourcodeworld.com/articles/read/396/how-to-convert-markdown-to-html-in-javascript-using-remarkable but it appears to be written in node and if it can be used directly in the js of a browser I have been unable to get it to work even copy pasting the code on the examples has not worked.
function OnKeyDownOne(event) {
if (event.which===13) {
let textarea = document.getElementById("textareaOne").value;
document.getElementById("textareaOne").value = "";
console.log(textarea);
document.getElementById("textOne").innerHTML = textarea;
}
}
function OnKeyDownTwo(event) {
if (event.which===13) {
let textarea = document.getElementById("textareaTwo").value;
document.getElementById("textareaTwo").value = "";
console.log(textarea);
document.getElementById("textTwo").innerHTML = textarea.replace(" *", "<b> ").replace("* ", " </b>");
}
}<textarea id="textareaOne" onkeydown="OnKeyDownOne(event)"></textarea>
<p id="textOne"></p>
<textarea id="textareaTwo" onkeydown="OnKeyDownTwo(event)"></textarea>
<p id="textTwo"></p>Based on the comments, I assume you are fine with using a library. You can pull any markdown library that you find on CDNs for example https://www.jsdelivr.com/package/npm/markdown-it.
var md = window.markdownit();
const input = document.getElementById("input")
const output = document.getElementById("output")
const render = () => {
output.innerHTML = md.render(input.value);
}
input.onkeyup = render
render()* {
box-sizing: border-box;
margin: 0;
}
.container {
display: flex;
}
#input,
#output {
flex: 1 1 0%;
min-height: 100vh;
border: 1px solid black;
border-collapse: collapse;
padding: 0.5rem;
}
#output {
background-color: #D0D0D0;
}
#output :not(p) {
margin-bottom: 1rem;
}
#output hr {
margin-top: 1rem;
}
#output p {
margin-bottom: 0.5rem;
}<script src="https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js"></script>
<div class="container">
<textarea id="input">
# Title
Paragraph with **bold**.
And also *italic*.
---
Type something...
</textarea>
<div id="output"></div>
</div>