CODEWITHSUNDEEP
javascripthtml
Eli
Eli

Reputation: 63

How to implement Markdown in HTML and JavaScript

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>

Upvotes: 2

Views: 4897

Answers (1)

The Fool
The Fool

Reputation: 20625

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>

Upvotes: 5

Related Questions