Front End Development Libraries Projects - Build a Markdown Previewer

JavaScript
1

Tell us what’s happening:
i am having issue with code in this code previewer is not working is there anyone who can help me?

Your code so far

import React from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'

marked.setOptions({
  breaks:true,
  highlight: function(code){
    return Prism.highlight(code, Prism.languages.javascript,'javascript');
  }
  
});

const renderer=new marked.Renderer();
renderer.link =function(href,title,text){
  return `<a target="_blank" href="${href}">${text}</a>`;
};

const Editor = ({ content, handleTextareaChange }) => (
  <textarea defaultValue={content} onChange={handleTextareaChange} />
);

const Previewer = ({ content }) => (<div id="preview" dangerouslySetInnerHTML={{
    __html: marked(content, { renderer: renderer} )
  }} />);

const App = () => {
  const [content, setContent] = React.useState("hey this is pavan");

  const handleTextareaChange = (event) => {
    setContent(event.target.value);
  };

  return (
    <div className="main">
      <Editor content={content} handleTextareaChange={handleTextareaChange} />
      <Previewer content={content} />
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#app"));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

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

Link to the challenge:

2

Depending on how you bring in the Marked lib, you may have to use the parse method.

marked.parse()

You are more likely to get help if you post a StackBlitz/CodeSandbox/Codepen or a GitHub repo.