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 content 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.js.

Someone suggested using How to convert markdown to HTML in Javascript using Remarkable, but it appears to be written in Node.js and if it can be used directly in the JavaScript code 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>

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 content 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.js.

Someone suggested using How to convert markdown to HTML in Javascript using Remarkable, but it appears to be written in Node.js and if it can be used directly in the JavaScript code 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>

• javascript
• html

• check this Javascript to convert Markdown/Textile to HTML (and, ideally, back to Markdown/Textile) – xhxe Commented Jan 26, 2022 at 22:02
• "but it appears to be written in node and if it can be used directly in the js of a browser" — The first paragraph on the page you link to says "Learn how to convert markdown to HTML directly in the Browser" – Quentin Commented Jan 26, 2022 at 22:06
• IT also says: "Or if you don't use a package manager, use a CDN (or download the script from the repository in Github here)" – Quentin Commented Jan 26, 2022 at 22:06
• if you dont mind just use a library, i.e. jsdelivr./package/npm/markdown-it – The Fool Commented Jan 26, 2022 at 22:08
• Quentin that is what it says and there is a script tag in one of the options but half of the code is node only and it does not explain how to import it if it can be used in the browser. I have tried multiple different ways and multiple guides on how to use js libraries and none of those have worked. – Eli Commented Jan 26, 2022 at 22:10

1 Answer 1

Based on the ments, I assume you are fine with using a library. You can pull any Markdown library that you find on CDNs, for example, 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/npm/[email protected]/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>