Build a Markdown Previewer Marked JS failing test case

JavaScript
1

Need help to pass marked.js test case

4. When I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (Hint: You don't need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked)

Code block where I’m using marked to markdown input text.

createMarkup() {
    return {
      __html: marked(this.props.text, {sanitize: true})
    }
  }

My codepen project link : https://codepen.io/scadyy/pen/LMywaz?editors=0010

Although I’m using marked.js and everything is working as expected (fine) but with this failing test case, I’m not able to figure out where I’m doing wrong. I seek valuable guidance.
Thanks

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0.

Link to the challenge:

1 Like
2

This is the key phrase, “…the text is rendered as HTML in the #preview element…” It isn’t very specific, but what it means that it is rendered directly in the #preview element. But you have it in a span that’s a child of that element. This is further confirmed by the rest of the error message, “the text is rendered as HTML in the #preview element as I type#preview’s only children should be those rendered by marked.js …”

So, there should be nothing inside that element, except what marked is going to provide it. See if you can solve it with that information.

2 Likes
3

That solved the problem. Thanks Sir

4

Same problem here, but I’m rendering directly into an element. No idea what’s going on here. It took maybe 10 minutes to write, but I’ve spent close to 20 hours trying to figure out how to pass test #4. Either it is a faulty test and needs to be rewritten or FCC is not including all requirements of the test.

class Previewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      defaultContent: `# H1

## H2

[Link Text](#)

code:
\`<div></div>\`

\`\`\`
Codeblock:

const abba = (a) => {
function(b){
return b + a;
}
}
\`\`\`

You want a list?
1. Here's a list.
+ A list item.
2. Here's another.
+ another list item
+ and another

> Block Quotes!
> block quotes, man

**Bold Text**

![React Logo](https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg)
`,
      content: null
    };
    this.handleChange = content => {
      this.setState({ content });
    };
  }
  render() {
    marked.setOptions({
      breaks: true
    });
    const renderer = new marked.Renderer();
    renderer.link = (href, title, text) => {
      return `<a target="_blank" href="${href}">${text}</a>`;
    };
    return (
      <div id="App">
        <textArea
          id="editor"
          placeHolder={this.state.content || this.state.defaultContent}
          onChange={e => this.handleChange(e.target.value)}
        >
          {this.state.content || this.state.defaultContent}
        </textArea>
        <div
          id="preview"
          dangerouslySetInnerHTML={{
            __html: marked(this.state.content || this.state.defaultContent, {
              renderer,
              sanitize: false
            })
          }}
        />
      </div>
    );
  }
}
ReactDOM.render(<Previewer />, document.getElementById("root"));