Front End Development Libraries Projects - Build a Markdown Previewer

Tell us what’s happening:
Describe your issue in detail here.

I have been trying for some time now to import and use the Markdown library using the cdn provided in the challenge, I have searched around a lot, found a couple of solutions, all different but none work. I would be grateful for some guidance

Your code so far

Hmtl:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Previewer</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <link href="./styles.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a8d9c96255.js" crossorigin="anonymous"></script>
    <script defer src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/5.1.0/marked.min.js" integrity="sha512-j5KAPeir0rGl+OSddiUeUtUlG+GK7acI/kNQqrpjSSB1IlDUbj3VnQOyoW3GWpPj7i8CSfb0T+Q4IRHxAPRxCA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel" src="index.js"></script>
</body>
</html>

Js:

class APP extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            preview: ""
        }
        this.setPreview = this.setPreview.bind(this)
    }
    setPreview(e) {
        this.setState({
            preview: e.target.value
        })
    }
    render() {
        return (
            <div>
                <div className="row">
                    <textarea id="editor" className="col-3 mx-auto" rows={10} onChange={this.setPreview}></textarea>
                </div>
                <div className="row">
                <div id="preview" className="col-5 mx-auto text-center">{this.state.preview}</div>
                </div>
            </div>
        )
    }
}

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

Your browser information:

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

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

Link to the challenge:

You are not using it in the code you posted.

But when using a script you have to use the parse method.

marked.parse()


I would suggest you use Vite to create a proper React app and use npm to install all the dependencies.

1 Like

Thanks for the help really appreciate it, I was able to figure out how to do it. I changed the div with the id preview to this: <div id="preview" className="col-5 mx-auto text-center" dangerouslySetInnerHTML={{ __html: marked.parse(this.state.preview)}}> and it worked.

1 Like

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