Front End Development Libraries Projects - Build a Markdown Previewer

JavaScript
1

Tell us what’s happening:

I am not to sure what I am doing I would appreciate suggestions on next steps I also don’t understand markdown am I using it correctly.

Your code so far

Markdown project (codepen.io)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36 Edg/123.0.0.0

Challenge Information:

Front End Development Libraries Projects - Build a Markdown Previewer

2

Hi @vitomortalo99

You don’t have any code to render your Markdown component to the UI.

Also, the textarea element in the html needs to go into the JS.

Two ways of doing this:

  1. create a separate component for the input, and access it using props
  2. embed the textarea in the main component.

For now, try to input text and have it output as is.
Perhaps revisit the middle of the React course.

Happy coding

4

so I change a far bit of my code but I cant seem to understand how to pass 4 Markdown project (codepen.io)

5

Hello, you don’t parse to markdown input. You only give input to preview screen. You shold check to sample project, how to markdown input shows on preview. For example this input;

Wild Header | Crazy Header | Another Header?
------------ | ------------- | -------------
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.

Should be like this:

Wild Header Crazy Header Another Header?
Your content can be here, and it can be here…
And here. Okay. I think we get it.

Output should be table.

Also you can use to Markdown library package as this project explain say or you can write different parser regex rules. But you should parse to Markdown input. Happy coding. :slightly_smiling_face:

6

Look at the documentation for the markdown library you are using.

https://marked.js.org

To set the HTML directly in React you can use dangerouslySetInnerHTML

There are also markdown React component libraries.

7

so would changing it to <div dangerouslySetInnerHTML={{ __html: this.state.input }} /> fix this I dont really understand

8

Also you should parse your input with Marked library and then you can use marked input on dangerouslySetInnerHTML and this will help you to parse input dynamicly on preview div.

9

do I have the right library?

10

Here is the library webpage,

Also explanation of this challenge gives to CDN link of this library. CDN means you can use an online code editor without installation. You can add this CDN via an HTML <script> tag or import it in the CodePen JS setup Package section. However, it gives an error because it imports a default export, but there is no default export. I fixed this by using the following approach:

import {marked} from "https://esm.sh/marked";
  const markdownHTML = marked.parse(input);

Also I realise now, your codepeon have been installed Marked in Extarnad script section. You just need to import (you can import without cdn link with this way) and use it. Also you don’t need handleKeyUp.

  handleKeyUp(event) {
    const previewElement = document.getElementById('preview');
    if (previewElement) {
      previewElement.innerHTML = event.target.value;
    }
  }

If you use this, you update of innerHTML before dangerouslySetInnerHTML.

1 Like
11

if I remove handleKeyUp i fail test 3 could I put dangerouslySetInnerHTML before handleKeyUp and still pass also thank for help.

12

Move the preview id to the element with dangerouslySetInnerHTML. That is the element the test is testing the content for.

13

thanks for the help I am now passing

14

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