How to implement Markdown in HTML and JavaScript

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 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>

check this Javascript to convert Markdown/Textile to HTML (and, ideally, back to Markdown/Textile) — niko
– niko, 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
– 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
– Quentin, Commented Jan 26, 2022 at 22:06
if you dont mind just use a library, i.e. jsdelivr.com/package/npm/markdown-it — The Fool
– 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
– Eli, Commented Jan 26, 2022 at 22:10

Peter Mortensen · Accepted Answer · 2023-10-10 15:21:28Z

5

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, 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/[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>

edited Oct 10, 2023 at 15:21

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 26, 2022 at 23:14

The Fool

21.2k7 gold badges76 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bubble Over a year ago

Thank you so much, but how about Codehilite, codehilite supposed to shown when inputing codes

Collectives™ on Stack Overflow

How to implement Markdown in HTML and JavaScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related