javascripthtmlmarkdown

Calling markdownit() for a dynamically loaded div


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


Solution

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