Hello guys, my first post is regarding my react markdown project.
I am trying to finish this one for 3 days now…
Code is at
myPen
It gives me error at test #3
The markdown in #editor is not being interpreted correctly and/or rendered into #preview : expected '<p>testing</p>' to equal '<p>testing</p>\n'
AssertionError: The markdown in #editor is not being interpreted correctly and/or rendered into #preview : expected '<p>testing</p>' to equal '<p>testing</p>\n'
I tried it with plain markdown, then react-markdown, as it is said it handles markdown better avoiding those dangerouslySet…etc methods and so on. I thought for a moment i did get a grasp of how it works, but I guess I was wrong… Basically I am trying to make it render a newline, or </br>, but i am not finding a way…
Can you help me pinpoint what is exactly wrong with my code?
(My project has some garbage code in it, as I added and removed pieces over time, but I hope that’s not what causes a problem)
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36.
Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer/
var e="The markdown in #editor is not being interpreted correctly and/or rendered into #preview ";u(""),s.assert.strictEqual(a.innerHTML,"","#preview's only children should be those rendered by marked.js "),u("testing"),s.assert.strictEqual(a.innerHTML,"<p>testing</p>\n",e),u(r.value+" and..."),s.assert.strictEqual(a.innerHTML,"<p>testing and...</p>\n",e),u("# h1 \n## h2"),s.assert.isTrue(2===a.children.length&&"H1"===a.children[0].nodeName&&"h1"===a.children[0].innerHTML&&"H2"===a.children[1].nodeName&&"h2"===a.children[1].innerHTML,'"# h1 \n## h2" should be rendered as <h1>h1</h1>\n<h2>h2</h2>\n'),u("**bold**"),s.assert.strictEqual(a.innerHTML,"<p><strong>bold</strong></p>\n",e)
Looks like you are using react-markdown.js which works fine, but the tester needs the inner html set in the preview div in a specific way as done by marked.js, see if you can remove react-markdown.js and make it work with said library , here is the cdn link https://cdnjs.cloudflare.com/ajax/libs/marked/0.6.0/marked.min.js and docs https://marked.js.org/#/README.md#README.md
Feel free to ask questions if you can’t get it to work
2 Likes
Thanks a million mate, it worked!!
good to see you made it work, you can always use the other one using react-markdown.js for future alternative reference…
1 Like