Front End Development Libraries Projects - Build a Markdown Previewer

[sinan.oksuz34]

Hello together i need help in this project.

i get the error “TypeError: marked is not a function”

i added in codepen settings the external marked script. but it wont work.

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

const defaultContent = `

# Hello, 
## You'r welcome at
### Hallooooooo

\`<div>Inline code</div>\`

\`\`\`
const multipleLineCode = (param) => {
    if(param) {
        return param
    }
}
\`\`\`

**Some bold text**

> Block Quote

1. First list item
2. Second list item
`

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 value={content} onChange={handleTextareaChange} id="editor" />

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

const App = () => {
  const [content, setContent] = React.useState(defaultContent)
  
  const handleTextareaChange = (event) => {
    setContent(event.target.value)
  }

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

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

Markdown Previewer

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/112.0

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

Link to the challenge:

freeCodeCamp.org

[bappyasif]

have you tried including this two libs in “js external libs settings” as well?

import * as React from “https://cdn.skypack.dev/react@17.0.1”;
import * as ReactDOM from “https://cdn.skypack.dev/react-dom@17.0.1”;

happy learning

[lasjorg]

You have to use marked.parse when loading the lib as a script.

[sinan.oksuz34]

no way it worked

may you earn millions of dollars in your life