<!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?
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();
}
<!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>