Markdown Converter - Marked not working?

JavaScript
1

This one requires an external script called ‘marked’, but I’m at it for hours and I can’t get it to work properly. I’ve tried the parse method by specifying the id of the textarea for example, but I keep getting uncaught type errors in every browser. I’ve tried things with an event listener for ‘input’, doing things with an external JS file, etc.

Is ‘marked’ not working properly anymore? I am seeing website where it works flawlessly so I have no clue what is going on. Can someone give me a hint on how to set this up properly?

2

Show us what you have tried.

3

I started off in React. I figured that I could use marked in combination with useState and a onChange event. It didn’t work and kept giving me errors. The console did log my keydowns since the error would go +1 with every keydown. I’ve tried npm-install inside of the project and the CDN link. Everything was properly imported inside of the designated JS file that I wanted to use marked with.

Error:

export 'default' (imported as 'marked') was not found in 'marked' (possible exports: Lexer, Parser, Renderer, Slugger, TextRenderer, Tokenizer, defaults, getDefaults, lexer, marked, options, parse, parseInline, parser, setOptions, use, walkTokens)

I went ahead and took a look at the freeCodeCamp rocks example in the dev console, just to get a slight hint on how to stop getting all of these errors. I couldn’t find any hints in there or at least anything that could point me in the right direction. I checked the official documentation of marked.

Except for this piece of code, I was unable to find anything in the ‘get started section’:

<script>
    document.getElementById('content').innerHTML =
      marked.parse('# Marked in the browser\n\nRendered by **marked**.');
  </script>

I went ahead and started a new Vanilla HTML/CSS/JS project to test if it would work there. I’ve assigned a textarea to the editor and a disabled textarea to the preview at first. Later I reassigned a div to the preview to test if that would be of any difference. It was not.

I tried this since it was my most educated guess looking at the example code in the ‘get started section’. Since I don’t know what parse does, and it wasn’t really explained I thought this would do something. It didn’t.

let editor = document.getElementById("editor");
document.getElementById('preview').innerHTML =
      marked.parse(editor.innerHTML);

I tried this:

editor.addEventListener('input', function() {
        preview.innerHTML = marked(editor.value);
      });

Also didn’t work. Then I started experimenting with the placement of the script tags. That didn’t make a difference. I keep getting these errors, but since I do not know how to properly use Marked, which is required for the exam, I don’t know how to resolve this specifically with marked.

Uncaught TypeError: marked is not a function
    at HTMLTextAreaElement.<anonymous>

Lastly, I went to the marked demo page, but the part that shows the output is embedded in a iframe element. Except for external scripts I couldn’t find anything that could hint me on how marked works and how I can properly attach it to my page.

I just need a small hint on how to properly attach the script in a workable state. From there I’ll be able to pass all of the other requirements.

4

Do you have the full project on Codepen or something like it?

What errors do you see in the browser console?

5

Certainly. I have a pen with the HTML/CSS version in here:

The most recent one I get is:

Uncaught TypeError: marked is not a function
    <anonymous> http://127.0.0.1:49823/:31

That is probably because of the current way of how I tried to set it up and experiment with.

6

Check the “Browser” example in the docs, they call the parse method on the marked object:

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked.parse('# Marked in browser\n\nRendered by **marked**.');
  </script>
</body>
</html>
7 
  let editor = document.getElementById('editor');
    document.getElementById('preview').innerHTML = marked.parse(editor)

I get an error saying marked.parse expects a string. Tried editor.innerHTML, I get no errors but nothing gets parsed in the preview. Changed marked.parse to editor.value, at least I get the same markup shown in the preview div after reload, but it doesnt parse it from markdown to html

8

I had issues with this when I completed this project and I seem to remember that I had to use dangerouslySetInnerHTML with marked to make it render the markup successfully.

Here’s a stackoverflow about the issue.
In case you’re interested, here’s a link to my project.

I don’t know if this helps with your specific issue as I don’t have time to delve too deeply into it right now…

9

You seem to be passing the element to it and not the text content of the element.

10

I’m gonna try a brand new react project, thanks @igorgetmeabrain and the others for the heads up!

11

It still doesn’t work. I keep getting the same error:

export 'default' (imported as 'marked') was not found in 'marked' (possible exports: Lexer, Parser, Renderer, Slugger, TextRenderer, Tokenizer, defaults, getDefaults, lexer, marked, options, parse, parseInline, parser, setOptions, use, walkTokens)
12

When I try to import marked from ‘marked’, I get this error. if I try to import {marked} from ‘marked’, parts of the marked script work. Like bold and emphasis work, ### works, but header 1 and 2 don’t work. I am at a complete loss what is going on here.

13

When using CodePen, I add scripts via the settings. I don’t have any import statements (or anything else) in my JS or HTML files. I believe that doing otherwise can create issues…

Untitled
Untitled739×811 74.4 KB

14

HTML:

<body>
    <div class="wrapper">
        <div class="flexwrapper">
            <textarea id="editor" cols="50" rows="30"></textarea>
            <div id="preview"></div>
        </div>
        <h1>Editor</h1>
        <h2>Preview</h2>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.3/marked.min.js"></script>
    <script src="js/markParser.js"></script>
</body>

JS:

const markIn = document.querySelector("#editor");
const htmlOut = document.querySelector("#preview")

markIn.addEventListener("input", function() {
    htmlOut.innerHTML = marked(markIn.value)
});

I get mixed results with this. Sometimes it outputs it properly, but on the bottom of the page. Sometimes one thing works, but that’s about it. Sometime when I want to do a single header, it doesn’t output anything, and up until I get to ###. Only then it outputs a third header. Is this something with my browser?

15

I got it working with the marked build that @igorgetmeabrain showed in his codepen.
No errors whatsoever. I will first try to build it in Vanilla HTML, CSS and JS and then try to see if I can get it working in React as well.

The reason why sometimes the code was updated on the bottom of the page was because I used an h1/h2 header for those pieces of code. marked saw that as something it had to update. Changed those to paragraph elements and now everything works like it should!

Thanks for all the help guys!

16

You can use dangerouslySetInnerHTML property for successfully rendering the HTML markups. Here’s one way of using marked with React:
Make sure to install marked
Incorporate marked in the package.json file
{
dependencies: {
react: “^17.0.0”,
marked: “^4.0.0”,
},
}
Then import marked in the .jsx file

import { marked } from “marked”;

Use the dangerouslySetInnerHTML property as shown below

import React from “react”;
import { marked } from “marked”;

class MarkdownExample extends React.Component {
getMarkdownText() {
var rawMarkup = marked.parse(“This is Markdown.”);
return { __html: rawMarkup };
}
render() {
return

;
}
}