Front End Development Libraries Projects - Build a Markdown Previewer

JavaScript
1

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?)

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

happy coding :slight_smile:

3

Okay, here’s my JS (react code)

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

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

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

4

you will have to make use of “marked”

for example

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

does that answer your question? happy coding :slight_smile:

5

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?

6

oh, no, you need to use, dangerouslySetInnerHTML

7

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

Do I have to use React in this project?

8

I never found a different solution here

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

9

How do I sanitize the marked string?

10

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

11

The docs have some information on it.

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