Front End Development Libraries Projects - Build a Markdown Previewer

JavaScript
1

Tell us what’s happening:

Hello everyone!
I make all the projects with create-react-app on VScode and with using hooks. My project has multiple files, since I practiced splitting the project on different components, so now I am stuck on how to upload my project into the codepen… I tried to copy-paste my code via console with EDIT HTML button, but it seams that after the transfer of the code- it doesn’t work properly… Please help me to find a solution either to upload my multiple-files react project into the codepen or please tell how to export html code … Thank you!

Your code so far

This is a link to my full github project:

Your browser information:
Brave

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Challenge: Front End Development Libraries Projects - Build a Markdown Previewer

Link to the challenge:

2

hello and welcome to fcc forum :slight_smile:

  • perhaps you might want to emphasize more on that

meanwhile, if you want to know how to use multiple js fils in same “pen”, reading from this topic just might help, happy reading :slight_smile: Two .js files in same pen?

3

The app is static. When I change the text in the editor field - reviewer field doesn’t change at all…

P.S. I will do my research about the article you sent, thank you!

4

Use StackBlitz or CodeSandbox instead of Codepen.

You can also host the app on Netlify, Vercel, Surge.sh, or GH Pages.

5

Thank you for your answer!

But how to check if my app will pass the tests then?

6

Same way, use the test script.

7

I apologies, but I don’t really know how to do that…
Is there any tutorial? I have never tested with scripts before…

8

Did you not test this locally using the test script?

You add it to the HTML at the bottom before the </body> tag.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
9

No… let me try this please…
Thank you for your help!

10

Thank you! I understood how to make tests :slight_smile:

But now I see that the tests didn’t pass…

3. When I enter text into the #editor element, the #preview element is updated as I type to display the content of the textarea

But the thing is that it IS changing the textarea… What is wrong then?

11

I think I got it…
I used setState for editor as well, so there was some delay before my changes and input. That is why it didn’t work.
Moreover, I used html-react-parser to put inside my #editor element parsed data, but it should have done with “dangerouslySetInnerHTML” on #editor element directly - it worked.

Still 2 tests missed, but now I at least know when to search :slight_smile:

Thank you!

12

I would just skip the state and useEffect in Reviewer.js and just use the value that is passed to it as props.

I don’t think there should be an issue using parse as it doesn’t do any sanitizing. But one less lib as a dependency is (almost) always worth it.

<div id="preview">{parse(marked.parse(props.input))}</div>

For the last test, you need to set the options for marked.js

https://marked.js.org/using_advanced#options

13

6. When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element

Before rendering the code, I review it and change with the function changeText, due to which this test cannot be passed.
It passed without changingText function (just the markdown) , but for curiosity purpose… Why doesn’t it work with my method? I change the string same as the markdown, but I just do it manually for studying purposes… Why this test fails when I try to use my own markdown?

Thank you!

14

Not sure I understand what you mean without seeing some code.

I will be back in a little bit, I have to go.

15

tests were passed, but now my markup doesn’t work.
I mean, it work sometimes and sometimes not because of the prefix - it doesn’t take it’s place usually and when prefix works- is parsed…

import hljs from ‘highlight.js/lib/core’;

import javascript from ‘highlight.js/lib/languages/javascript’;

hljs.registerLanguage(‘javascript’, javascript);

  <div id="preview">{parse(marked.parse(props.input, { breaks: true, langPrefix: "hljs language-javascript" }))}</div>

Where could be a mistake?

p.s. this is the code I put inside the head:
16

link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai.min.css”>
script src=“https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js”>
script>hljs.initHighlightingOnLoad();

17

The code highlighter should only be an npm dependency.

Remove the CDN and script code from the HTML. Remember to import the CSS inside React import 'highlight.js/styles/monokai.css';

Short answer:

I would add a useEffect, call hljs.highlightAll() inside it, and add the props.input to the dependency array. Seems like the easiest way to do it.

useEffect(() => {
  hljs.highlightAll();
}, [props.input]);

Long answer:

marked.parse second argument can be a callback, but you are calling the function fn(), not passing it fn.

The method you are using from highlight.js is deprecated.

Some of the highlight.js API doesn’t really work with that callback as they have value props (so you end up passing the value and not the function). You can use the highlight property on the marked option object instead (as shown in the marked docs).

{parse(
  marked.parse(props.input, {
    breaks: true,
    highlight: (code) =>
      hljs.highlight(code, { language: 'javascript' }).value,
  })
)}

You will however be missing the background color style on the code element if you do that, which you won’t with the useEffect option.

As an aside, you do not need jQuery, you can do all that in React.

1 Like
18

Thank you very much!
This explains everything! :slight_smile:
Problem solved.

Have a beautiful day!

19

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