Build a Markdown Previewer - Test 4?

Tell us what’s happening:
I am working on the Markdown Previewer and I think I’m close to getting the app working with no CSS yet. I copied the example markup placeholder to test against before I write my own. I can’t figure out how to get the previewer to work with the imported ‘marked’ parser. I imported it through the pen settings, but it won’t work. I have been looking over a lot of different examples and I can’t figure out why my code isn’t working… though I am sure it is a simple issue. I would go for any help or direction at this point.

Your code so far

Your browser information:

User-Agent is: Chrome/97.0.4692.99

Challenge: Build a Markdown Previewer

Link to the challenge:

You’re declaring the initial content after render method, try move that const inside the render() method and before the return. Or inside any other method which you need it. Any const or variable have to be declared before you use it. You’re using this const in the first line, but declaring at the end of your code.

This is wrong and will thrown an error:

const sum = myNumber + 1
const myNumber = 5

this is ok:

const myNumber = 5
const sum = myNumber + 1

Also in your pen you’re importing marked two times. ‘marked.js’ and ‘marked.min.js’ both are the same library, ‘marked.min.js’ is the minified version, which is better for performance.

1 Like

I was wondering why there we two import links. That makes a lot more sense. I tried adding the initialContent const into the render and before return, but it just makes everything go black. The only place that const is being reference is when setting the state.input object. It seems to work the same no matter where it is declared… which I don’t fully understand why. The pen example given by freeCodeCamp declares that placeholder after all the React Components. I figured it would be best to follow suit because it gets such a long const out of the way.

Alas, the code is still not rendering correctly, but I added some basic CSS to make it easier to see.

yes you right, in react this works different.

What you mean with “is not rendering correctly”? I see everything correct, but the markdown won’t be rendered until you setup marked. For now you only added the library, you need to use it

Visit marked site you have a lot of well documentation there https://marked.js.org/

Just for giving an easy example in vanilla javascript:

const renderThis = `# Marked in browser\n\nRendered by **marked**.`

document.getElementById('content').innerHTML = marked.parse(renderThis)

You have my markdown previewer here if you want to check another example, but I’ve used functional components instead of class based as your example and the fcc one.

Hey, I’ve been trying to figure out what I am doing wrong for hours. Do I not have marked importing or something? I have tried multiple formats like: <div id='preview' dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} />, creating a function that uses marked.parse(this.state.input), and document.getElementById('content').innerHTML = marked.parse(this.state.input). I can’t figure out why they weren’t working. I even went as far as copying and pasting a YouTuber’s passed code verbatim into my current pen and a new one (after enabling babel and importing what is needed) to see it at least worked… their code doesn’t work in the pens either… I have no idea what I am doing wrong.

No, you don’t need to import again, because you have already imported on codePen when you add
the library, you have access to all marked functions. In some examples like my markdown you see import { marked } from 'marked' because I’m adding the library through npm.

The main problem is you’re pasting code without adapting to your code, or knowing what it does, every tutorial you’ll see will work in a differente way, or use different names for variables etc. You need to understand the code you’re pasting first then adapt it or rewrite to suit to your app.

For example, you’re trying to render a state named markdown, but that state doesn’t exist in your code, probably is from FCC pen or that youtube video you watched. In your app the state is named different.

Also you’re not invoking the function marked.parse() which is needed. I just made a couple of fixes in your code and works perfectly, try to figure out by yourself look here:

<div id='preview' dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} />

Okay, I have this <div id='preview' dangerouslySetInnerHTML={{__html: marked(this.state.input)}}/>. The variable should be pulling from my state. If I add that variable by itself to an element then it will show up just fine, without using marked. The above code just makes everything return blank on the page. The only other place I can think to put it is in another function, but that just inserts the same element, so it doesn’t actually do anything different than when I enter them directly. I have tried placing it in other areas on the JSX and that doesn’t make a difference. I was wondering if could be something to do with binding for some reason, but that is out I can’t even insert markdown directly into marked() and make it work.

Before looking at your code, this is the part that stood out to me. Why is something happening when you pass in a value normally, but when you use marked it doesnt. Sometimes when I need to debug I try and strip things back to their simplest form. Just making sure it’s alive, and then bit by bit re-add the other code.

In this case, I would try and understand why it works with a standard value, but not with marked()

What is the marked function supposed to be doing? I can’t see it being imported or created anywhere. Can you get it to work (by even just console.logging something) before passing it into the div?

1 Like

Okay, I imported marked and now it works. I don’t really understand though. This might be a dumb question, but if you add a library, framework, etc to the ’ Add External Scripts/Pens’ in codepen, why would you need to write an import statement? I don’t have to do that with React, Redux, Bootstrap, or JQuery, so why Marked?

I’m not too familiar with Codepen, but I imagine that to the External scripts/pens is just adding the library, the same as installing with npm or yarn (which would be added to your package.json).

And then in each file you want to use it you need to import it.

That’s what you’d usually have to do if you were writing it for your own project in your own local IDE anyway

1 Like

Okay, that makes sense. Thank you!

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