Help with the use of the marked library on Markdown Editor challenge

[amandavarella]

Tell us what’s happening:
Hello, I created a basic controlled text area.
Now, I am trying to pass the text input to get it’s markdown version.
I copied the following code from the challenge example:

const Preview = (props) => {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: marked(props.markdown, { renderer: renderer })
      }}
      id="preview"
    />
  );
};

And imported the following library on codepen:

https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.3/marked.min.js

I am receiving the following error. It appears that the marked library hasn’t been recognised

https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.3/marked.min.js

Here is my code so far
Please uncomment the following code so you can see the error happening.

      /*dangerouslySetInnerHTML={{
        __html: marked(props.markdown, { renderer: renderer })
      }}*/

Markdown editor

Help appreciated!

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:101.0) Gecko/20100101 Firefox/101.0

Challenge: Build a Markdown Previewer

Link to the challenge:

freeCodeCamp.org

[lasjorg]

ReferenceError: renderer is not defined

You are using an identifier renderer which hasn’t been defined. It is inside the options object you passed to marked (the second argument). You can check the example project to see an example of a renderer customization (the link customization that adds target="_blank").

The renderer used in the options object in the example project.

// INSERTS target="_blank" INTO HREF TAGS (required for Codepen links)
const renderer = new marked.Renderer();
renderer.link = function (href, title, text) {
  return `<a target="_blank" href="${href}">${text}</a>`;
};

https://marked.js.org/using_pro#renderer

[amandavarella]

Awesome @lasjorg, thank you, always helpful!!