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
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.
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.