# Front End Development Libraries Projects - Build a Markdown Previewer

**URL:** <https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [February 23, 2025, 2:21am UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221 "2025-02-23T02:21:18Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![CasualWanderer20XX](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/casualwanderer20xx/32/387661_2.png) [@CasualWanderer20XX](https://forum.freecodecamp.org/u/CasualWanderer20XX)\
**Post date:** [February 23, 2025, 2:21am UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/1 "2025-02-23T02:21:18Z")

</div>

So, as of right now, I got the editor to output stuff onto the preview as it should.  
However, when I start to use marked.parse on the state input and then render it onto the ‘preview’ div in the component, it renders the markdown as text (the tags are there, but it’s also rendered as text) instead of HTML.

How I turn the markdown back into HTML in this case?

(Can I share my code here?)

---

<div class="post-metadata">

**Author:** ![bappyasif](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bappyasif/32/190571_2.png) [@bappyasif](https://forum.freecodecamp.org/u/bappyasif)\
**Post date:** [February 23, 2025, 12:42pm UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/2 "2025-02-23T12:42:21Z")

</div>

> [@CasualWanderer20XX](#):
>
> (Can I share my code here?)

- yes you can
- also include your “repl/codepen/etc” link here as well

happy coding 🙂

---

<div class="post-metadata">

**Author:** ![CasualWanderer20XX](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/casualwanderer20xx/32/387661_2.png) [@CasualWanderer20XX](https://forum.freecodecamp.org/u/CasualWanderer20XX)\
**Post date:** [February 23, 2025, 9:45pm UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/3 "2025-02-23T21:45:37Z")

</div>

Okay, here’s my JS (react code)

```auto
import React from "https://esm.sh/react@19";
import ReactDOM from "https://esm.sh/react-dom@19/client";
import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js";
const root = ReactDOM.createRoot(document.getElementById('node'));

class Markup extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
   
  }
  handleChange(event){
    this.setState({
      input: event.target.value
    });
  }
 
  render(){
    return (
      <div>
        <div class="editor-holder">
          <h4 id="editor-title">Editor</h4>
        <textarea id="editor" value={this.state.input}onChange={this.handleChange} rows="5"></textarea>
        </div>
        <h1>Control input:</h1>
        <div id="preview">
          {marked(this.state.input)}
        </div>   
      </div>
    );
  }
};

root.render(<Markup />);

```

And here’s the HTML

```auto
<div id="node">
  
</div>

```

If any more, here’s the Codepen currently: [https://codepen.io/CasualWanderer20XX/pen/KwKdVYz](https://codepen.io/CasualWanderer20XX/pen/KwKdVYz)

---

<div class="post-metadata">

**Author:** ![bappyasif](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bappyasif/32/190571_2.png) [@bappyasif](https://forum.freecodecamp.org/u/bappyasif)\
**Post date:** [February 24, 2025, 11:59am UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/4 "2025-02-24T11:59:47Z")

</div>

> [@CasualWanderer20XX](#):
>
> How I turn the markdown back into HTML in this case?

you will have to make use of “marked”

for example

```js
const markdownText = '# Hello World\n\nThis is a markdown text.';
const html = marked(markdownText);

```

does that answer your question? happy coding 🙂

---

<div class="post-metadata">

**Author:** ![CasualWanderer20XX](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/casualwanderer20xx/32/387661_2.png) [@CasualWanderer20XX](https://forum.freecodecamp.org/u/CasualWanderer20XX)\
**Post date:** [February 24, 2025, 2:00pm UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/5 "2025-02-24T14:00:06Z")

</div>

I…did. When I rendered the input into the react component using marked, it came out as text instead of html.

Edit: Wait, do you mean I should use marked again?

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 24, 2025, 5:50pm UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/6 "2025-02-24T17:50:35Z")

</div>

oh, no, you need to use, [`dangerouslySetInnerHTML`](https://legacy.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml)

---

<div class="post-metadata">

**Author:** ![CasualWanderer20XX](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/casualwanderer20xx/32/387661_2.png) [@CasualWanderer20XX](https://forum.freecodecamp.org/u/CasualWanderer20XX)\
**Post date:** [February 24, 2025, 5:59pm UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/7 "2025-02-24T17:59:01Z")

</div>

It’s the only solution in this case, isn’t it?

Do I have to use React in this project?

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 24, 2025, 6:01pm UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/8 "2025-02-24T18:01:00Z")

</div>

> [@CasualWanderer20XX](#):
>
> It’s the only solution in this case, isn’t it?

I never found a different solution here

> [@CasualWanderer20XX](#):
>
> Do I have to use React in this project?

you need to use what is taught in the certification, so yes, continue doing this in React

---

<div class="post-metadata">

**Author:** ![CasualWanderer20XX](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/casualwanderer20xx/32/387661_2.png) [@CasualWanderer20XX](https://forum.freecodecamp.org/u/CasualWanderer20XX)\
**Post date:** [February 24, 2025, 6:06pm UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/9 "2025-02-24T18:06:29Z")

</div>

How do I sanitize the marked string?

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 24, 2025, 6:07pm UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/10 "2025-02-24T18:07:40Z")

</div>

hopefully the output from `marked` is sanitized, but it’s actually not the scope for this project

but you can research for it, it’s not something that can be summarized easily in a forum post

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [February 24, 2025, 6:42pm UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/11 "2025-02-24T18:42:39Z")

</div>

The docs have some information on it.

- [Usage](https://marked.js.org/#usage)

As an aside, add the `breaks` option to pass the last test.

- [Options](https://marked.js.org/using_advanced#options)

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [August 26, 2025, 6:43am UTC](https://forum.freecodecamp.org/t/front-end-development-libraries-projects-build-a-markdown-previewer/736221/12 "2025-08-26T06:43:07Z")

</div>

Closed on August 26, 2025, 6:43am UTC

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