How to implement markdown in html and js

Question

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>

check this [Javascript to convert Markdown/Textile to HTML (and, ideally, back to Markdown/Textile)](https://stackoverflow.com/questions/1319657/javascript-to-convert-markdown-textile-to-html-and-ideally-back-to-markdown-t) — callmenikk, Jan 26 '22 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, Jan 26 '22 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, Jan 26 '22 at 22:06
if you dont mind just use a library, i.e. https://www.jsdelivr.com/package/npm/markdown-it — The Fool, Jan 26 '22 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, Jan 26 '22 at 22:10

score 2 · Accepted Answer · answered Jan 26 '22 at 23:14

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>

How to implement markdown in html and js

1 Answers1