AlexKorn
November 3, 2024
78 views
0 votes
2 Answers

<!doctype html>
<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js" integrity="sha512-SYfDUYPg5xspsG6OOpXU366G8SZsdHOhqk/icdrYJ2E/WKZxPxze7d2HD3AyXpT7U22PZ5y74xRpqZ6A2bJ+kQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script>
window.onload = function() {
  var md = window.markdownit();
  var div = document.getElementsByClassName('markdown');
  for(var i = 0; i < div.length; i++) {
    var content = div[i].innerHTML;
    document.getElementsByClassName('markdown')[i].innerHTML = md.render(content);
  }
}
</script>

</head>
<body>


<div class="markdown">
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

+ one
+ two
  + two and half
+ three
  + three and half
    + three point seventy five
</div>

</body>
</html>

This is an example of how to call markdownit() for a specific div after the page loads.

On my page, div tags are loaded dynamically after certain user actions. How do I call markdownit() for an emerging div with the id="markdown" attribute?

Answers

You can reuse your md object and call render on the content you wish and pass the result to the innerHTML of the div you create. Here’s an example, where after page load, 100 milliseconds later a new div is created and the process is applied to it successfully.

<!doctype html>
<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js" integrity="sha512-SYfDUYPg5xspsG6OOpXU366G8SZsdHOhqk/icdrYJ2E/WKZxPxze7d2HD3AyXpT7U22PZ5y74xRpqZ6A2bJ+kQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script>
window.onload = function() {
  var md = window.markdownit();
  var div = document.getElementsByClassName('markdown');
  for(var i = 0; i < div.length; i++) {
    var content = div[i].innerHTML;
    document.getElementsByClassName('markdown')[i].innerHTML = md.render(content);
  }
  setTimeout(function() {
      document.body.innerHTML += `
<div id="markdown">
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

+ one
+ two
  + two and half
+ three
  + three and half
    + three point seventy five
</div>`;
  document.getElementById("markdown").innerHTML = md.render(document.getElementById("markdown").innerHTML);
  }, 100);
}
</script>

</head>
<body>


<div class="markdown">
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

+ one
+ two
  + two and half
+ three
  + three and half
    + three point seventy five
</div>

</body>
</html>

You can achieve this by simply moving your code into a separate function, then call that function whenever user submit new content.

var md = window.markdownit();

function markdownContent() {
  var div = document.getElementsByClassName('markdown');
  for(var i = 0; i < div.length; i++) {
    // Check if it is already loaded, if not, add attribute as loaded
    if(div[i].hasAttribute('markdown-loaded')) continue;
    div[i].setAttribute('markdown-loaded', '');

    var content = div[i].innerHTML;
    document.getElementsByClassName('markdown')[i].innerHTML = md.render(content);
  }
}

window.onload = function() {
  markdownContent();
}

Example:

<!doctype html>
<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js" integrity="sha512-SYfDUYPg5xspsG6OOpXU366G8SZsdHOhqk/icdrYJ2E/WKZxPxze7d2HD3AyXpT7U22PZ5y74xRpqZ6A2bJ+kQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <style>
    textarea {
      display: block;
      margin-bottom: 5px;
      width: 100%;
      max-width: 300px;
      height: 90px;
    }
  </style>

<script>
var md = window.markdownit();

function markdownContent() {
  var div = document.getElementsByClassName('markdown');
  for(var i = 0; i < div.length; i++) {
    // Check if it is already loaded, if not, add attribute as loaded
    if(div[i].hasAttribute('markdown-loaded')) continue;
    div[i].setAttribute('markdown-loaded', '');

    var content = div[i].innerHTML;
    document.getElementsByClassName('markdown')[i].innerHTML = md.render(content);
  }
}

window.onload = function() {
  markdownContent();

  const markdownInput = document.querySelector('.markdown-user-input');
  const markdownSubmitButton = document.querySelector('.submit-markdown');
  const markdownOutput = document.querySelector('.dynamic-markdown');

  markdownSubmitButton.addEventListener('click', () => {
    if(!markdownInput.value) return void 0;

    markdownOutput.innerHTML = `<div class="markdown">n${markdownInput.value}n</div>`;
    markdownContent();
  });

}
</script>

</head>
<body>
<h1 style="color: rgb(104, 104, 104);">Try editing and submit to see dynamic markdown updation.</h1>
<textarea class="markdown-user-input">
# Try Submitting Markdown
## Example of an H2 Heading

- List item
</textarea>
<button class="submit-markdown">Submit Markdown</button>

<h2 style="color: rgb(104, 104, 104);">Rendered Markdown Output</h2>
<div class="dynamic-markdown"></div>

<hr>

<h1 style="color: rgb(104, 104, 104);">Default Markdown Loaded</h1>
<div class="markdown">
  # H1 Heading Example
  ## H2 Heading Example
  ### H3 Heading Example
  #### H4 Heading Example
  ##### H5 Heading Example
  ###### H6 Heading Example
  
  + Item One
  + Item Two
    + Subitem Two
  + Item Three
    + Subitem Three
      + Deeper Subitem
</div>

</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Calling markdownit() for a dynamically loaded div

Answers

Example: