Could you help me out with this Markdown Previewer issue?

JavaScript
1

I’m building the Markdown Previewer and am having trouble passing this user story.

User Story #5: When my markdown previewer first loads, the default text in the #editor field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.

The previewer works but it won’t render a inline code or code block.

I’ve tried to use backticks `` for in-line and ``` for block but they just directly render with the backticks showing up. The < code > tag works though, but that isn’t what the user story checks for.

This is the variable I have the default text stored in, which is passed to the state.

const defaultText='<h1>Header</h1> <h2>Sub-Header</h2> 
<ahref="freecodecamp.org">Link</a> <li>list item</li> <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" width="100px" height="100px"> <code>2 + 3 = 5</code> <blockquote>quote here</blockquote> <p style="font-weight: bold;">bolded text</p>'

Inside the component, the state is defined like this:

this.state = {
      markdown: defaultText
    }

And it’s rendered like this:

<Form onChange={this.handleChange} defaultText={this.state.markdown} />
      <div dangerouslySetInnerHTML={{__html: this.state.markdown}} id='preview'/>
     </div>

Also strange is the failed test is currently returning:
write some markdown representing an <h1> : expected false to be true'

even though the only elements that aren’t in there at the moment are the inline code and code block elements. Everyone else is currently rendering fine.

Here is the CodePen link:

2

First, the defaultText should be markdown not HTML.

Second, when rendering, you should pass your markdown to marked so it generates HTML from markdown:

<div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}}>
4

Thanks. I added marked(), and it now passes the Github requirement.

But inline code and code-block still render as text with backticks and not as code. Do you see anything else that could be fixed?

EDIT: ahhh now i see, I wasn’t familair with Markdown and its difference from HTML. Will go and fix that. Silly mistake lol