Front End Development Libraries Projects - Build a Markdown Previewer

Tell us what’s happening:
I’ve tried to build the React Markdown app ans solving the challenges to pass the assignment, without success. I link the codepen project, so that you can have a look at it.
In practice, I can’t seem to pass the challenges with importing marked.
Can you guide me to a solution for this issue?
I asked ChatGPT for some help, but even it (is it an it?) cannot come up with a satisfying solution for the issue and keeps apologising…

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0

Challenge: Front End Development Libraries Projects - Build a Markdown Previewer

Link to the challenge:

Did it tell you to open the browser console and read the error message? Because that should really be the first step (that was rhetorical).

  1. Fix the imports
import React from "";
import ReactDOM from "";
import { marked } from "";
  1. You can’t mount the app to a div with the id of preview as there should only be one element with that id. All you need in the HTML is a single element with a unique id for the mount.

  2. Your initial markdown isn’t correct. You can use the markdown from the example project (copy and paste it exactly as is).

  3. If you move the marked option call from the life cycle method to outside the component you should pass the last test as well. You can put it right after the import.

As an aside, the div that renders the markdown should be self-closing <someElementType /> as it does not take child content.

<div id="preview" dangerouslySetInnerHTML={{ __html: preview }} />
1 Like

I updated the code with your tips, which were gladly welcomed!
Nevertheless, when I try to pass the tests, only 7 to 8 are greened!
In particular test 4 results with the following errors:
test 4: #preview’s only children should be those rendered by marked.js : expected ‘

<t…’ to equal ‘’

I don’t know what is causing this error, given that when I type in the editor, the code is actually rendered in HTML in the previewer!!!

As a side note, I wanted to add Prism.js to the code, but the format for importing React and marked results in an error: it mentions that languages is not defined! In the code it is not marked since I excluded those lines with comments, to concentrate better on passing the challenges, but I wanted some insights on this as well.
Thanks again for guiding me towards the completion of these tasks!

  1. Don’t remove the preview id from the element that has the preview. Change the mount element id instead.

  2. You are not importing the correct package, it is prismjs

  3. markedjs has deprecated the highlight option in V5

There is a new marked-highlight package (or you can downgrade)

Thanks for your help. I cannot change the mount element, since by doing so, it fails challenge 3!!!
I don’t know what is causing this issue with challenge 4, since in concrete, it actually applies the html to the editor text!!!

Sure you can. Make the id in the HTML root and use preview for the preview element.

I do not know what happened, but as I deleted preview from html and mounted React with root, All challenges were passed!!!
I still do not know what was the reason causing the error, but I am finally glad, this project is over!!!
For future users who’ll struggle with this challenge, may use the code above as a reference. editor and preview should be on the same file (from what I understood), and then send everything to html dom![quote=“lasjorg, post:6, topic:616636, full:true”]
Sure you can. Make the id in the HTML root and use preview for the preview element.

Thanks lasjorg for helping me!

Just to explain it.

ids should be unique. The test will only look at the first element with the preview id on it. The preview id must be on the element with the preview output. If an element that comes before it also has the same id the test will be looking at the content of the wrong element.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.