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


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Previewer</title>
    <script crossorigin src=""></script>
    <script crossorigin src=""></script>
    <script src=""></script>
    <link href="" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <link href="./styles.css" rel="stylesheet">
    <script src="" crossorigin="anonymous"></script>
    <script defer src=""></script>
    <script src="" integrity="sha512-j5KAPeir0rGl+OSddiUeUtUlG+GK7acI/kNQqrpjSSB1IlDUbj3VnQOyoW3GWpPj7i8CSfb0T+Q4IRHxAPRxCA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <div id="root"></div>
    <script type="text/babel" src="index.js"></script>


class APP extends React.Component {
        this.state = {
            preview: ""
        this.setPreview = this.setPreview.bind(this)
    setPreview(e) {
    render() {
        return (
                <div className="row">
                    <textarea id="editor" className="col-3 mx-auto" rows={10} onChange={this.setPreview}></textarea>
                <div className="row">
                <div id="preview" className="col-5 mx-auto text-center">{this.state.preview}</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/ 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.


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.