React Markdown Prism help please

My crude markdown previewer

My markdown previewer

I do not understand why the first load of the page renders my default state correctly per marked and prism, but after I edit the text in the editor textarea it seems to keep a marked format but a different prism css? Any thoughts are appreciated.

Why does the styling change after state update?

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0

Challenge: Build a Markdown Previewer

Link to the challenge:

You can always set your own styles for the <pre> element in your CSS.

Otherwise, I’m pretty sure you have to re-run Prism on each update. It seems the <pre> element is missing the class on re-renders.

useEffect(() => {
}, [editorText]);

Not sure how expensive that is. You might be able to wrap the call to Prism inside an if statement that does some regex check (to only run Prism when a code block is typed).

Another option would be to extend markedjs to make sure the class is added to the <pre> container element. I tried it briefly and it worked for the container but broke the actual token highlighting. Didn’t really look into much.

OK , so my solution ( which is obviously not the best) for now is that i just eliminated all class selectors from the prism CSS. First, I don’t know how to extend markedjs ,second the useEffect works but I agree why send everything through it when i just need code highlighted and adding extra logic is just adding more to the band-aid in my opinion. I thought the regex stuff is the job of markedjs. Really my biggest problem with all of this is that I want to understand what is stripping my classes from the <pre> and <code> elements after a state change. Will look into extending marked. Thank you.

Side thought, forgive me if I’m not using the correct terms, are the class names only inherited from the parent element when the component mounts?

I don’t think re-running Prism on input updates is that bad. I’m pretty sure I have seen some code editors that use Prism for the syntax highlighting (which means it would need to run on input).

As far as I can tell, it is only the class on the container pre element that is missing on re-renders. All the token highlighting still works. So you are just missing the container styles (background color, font, etc.) which you can easily add yourself.

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