Front End Development Libraries Projects - Build a Markdown Previewer

[AshishMakwnana]

Tell us what’s happening:
Describe your issue in detail here.
in which , marked library not work in code pen , what should i do?
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'
const { useState } = React;
import marked from 'https://cdn.skypack.dev/marked';
import Prism from 'https://cdn.skypack.dev/prismjs';

marked.setOptions({
  breaks: true,
  highlight: function(code) {
    return Prism.highlight(code, Prism.languages.javascript, 'javascript');
  },
});
const App = ()=>{
    return(
    <>
        <Editer />
    </>
    );
}

const Editer=()=>{
const [text, setText] = useState("hello");
const html = marked(text);
  return(
  <>
      <div>
        <textarea
          id="editor"
          value={text}
          onChange={(e)=> setText(e.target.value)}>
        </textarea>
        <div id="preview"  dangerouslySetInnerHTML={{ __html: html }}>
          
        </div>
      </div>
  </>
  );
}

ReactDOM.render(<App/>,document.getElementById("root"));

Your browser information:

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

Link to the challenge:

freeCodeCamp.org

[lasjorg]

Use esm.sh instead of skypack.

import { marked } from 'https://esm.sh/marked@5.1.1';

---

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').