I am trying to build an HTML markdown previewer, but I keep getting an uncaught error in my console even though my code seems to be okay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mardown Preview App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/dfce6e7f73.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"
integrity="sha512-xeUh+KxNyTufZOje++oQHstlMQ8/rpyzPuM+gjMFYK3z5ILJGE7l2NvYL+XfliKURMpBIKKp1XoPN/qswlSMFA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main class="container text-center">
<div id="editor-area">
<div>
<h1>Editor</h1>
<h1>
<div id="tog1">
<i class="fa-solid fa-maximize"></i>
</div>
<div id="tog2" style="display: none;">
<i class="fa-solid fa-minimize"></i>
</div>
</h1>
</div>
<textarea id="editor" name="editor" id="" cols="80" rows="5"></textarea>
</div>
<div id="preview-area">
<div>
<h1>Preview</h1>
<h1>
<div id="tog3">
<i class="fa-solid fa-maximize"></i>
</div>
<div id="tog4" style="display: none;">
<i class="fa-solid fa-minimize"></i>
</div>
</h1>
</div>
<textarea id="preview" name="preview" id="" cols="80" rows="5" readonly disabled></textarea>
</div>
</main>
<script>
const editor = document.getElementById('editor');
const preview = document.getElementById('preview');
const updatePreview = () => {
const editorInput = editor.value;
const markdownHtml = marked(editorInput);
preview.value = markdownHtml;
console.log("Editor input:", editorInput);
console.log("marked function:", marked);
console.log("Preview updated");
};
editor.addEventListener('input', updatePreview);
</script>
</body>
</html>
In the above code snippet I have inserted a markdown library in my <head>
then called the marked()
function in my updatePreview()
function, yet I keep getting either "undefined" or "marked" is not a function in my console
2
Answers
I think the problem is that marked is not a function but an object. Try typing
in your console.
From the example given in the github README for marked, the first usage is given as marked.parse:
So your console is right in complaining that marked is not a function in this line of your code:
marked
is not a function but the marked API, which is why you’re seeing a shed load of stuff being logged.You wanted
marked.parse()
instead.