Estoy usando js marcados para representar una cadena que contiene texto de descuento en html div.
índice.html

 ... <div id="myDiv"></div> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="index.js"></script> ...

índice.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); }) } ...

El descuento se representa dentro de myDiv como se esperaba.

También tengo una carpeta en el mismo directorio que contiene un montón de archivos de descuento. Pero no puedo importarlos/usarlos en el archivo index.js . Intenté usar fetch pero obtuve este error:

Como es evidente, se vuelve muy difícil editar y leer cadenas más grandes. ¿Hay alguna forma mejor de representar el descuento en el html (tal vez importando un archivo de descuento)?
PD: Estoy usando Vanilla Js.