I am using marked js to render a string containing markdown text to html div.
index.html
...
<div id="myDiv"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="index.js"></script>
...
index.js
...
function renderMarkdown() {
let myDiv = document.querySelector('#myDiv');
myDiv.innerHTML = marked.parse('# This is heading \n ## This is heading 2 \n ### This is heading 3 \n Let us write a quick text and sign off! Here is a list \n - Hello \n - World')
}
async function getMarkdownFile() {
const response = await fetch('./content/hello.md', {
method: 'GET',
})
.then(response => response.text())
.then(data => {
console.log(data);
})
}
...
The markdown renders inside myDiv as expected.
I also have a folder in the same directory containing a bunch of markdown files. But, I am unable to import/use them in index.js file.
I tried using fetch but, get this error:
As it is evident, it becomes very difficult to edit and read larger strings. Is there any better way to render markdown to the html (maybe by importing a markdown file)?
PS: I am using Vanilla Js.
