Link to my project: https://codepen.io/Henriksonn/full/PoXqKwx
So my markdown previewer passes all the other test and it seems to render default html properly on load, yet it fails this test:
6. When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element
#editor’s markdown does not render correctly on window load : expected ‘
Welcome to my markdown previewer!…’
Welcome to my markdown previewer!…’
Make sure what the preview contains is always the editor’s content after it has gone through the markdown parser, including the initial load. Use the actual output of the parser. You can use componentDidMount to update the preview with the parsed output.
The element with dangerouslySetInnerHTML should not accept child content. As such it should not have the closing tag (it looks like an explicitly “closed” /> void element).
<div dangerouslySetInnerHTML={{ __html: htmlString}} id="preview" />
It still doesn’t pass the tests even after making the recommended changes.
I just noticed that it doesn’t pass the first test I run after opening the page, but if I run another test immediately after that, it passes the second test
It is caused by Prism.
There is a change to the class string between renders (the initial has more spaces which I think is the issue).
You can try a different code highlighter or debug the issue with Prism. The markedjs docs suggest using marked-highlight.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.