React Markdown Prism help please

[nsgxyz]

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:

freeCodeCamp.org

[lasjorg]

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(() => {
  Prism.highlightAll();
}, [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.

[nsgxyz]

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.

[nsgxyz]

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?

[lasjorg]

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.