<script> tag doesn't run presumably because of the client routing
Answered
Alano Español posted this in #help-forum
Alano EspañolOP
I am using highlight.js to highlight code snippets in my pages
It works perfectly if i input the URL directly or refresh the page but it doesn't work when I arrive on that page using <Link>'s from other pages
I would appreciate if you could point out what is wrong or if there is a better way
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>It works perfectly if i input the URL directly or refresh the page but it doesn't work when I arrive on that page using <Link>'s from other pages
I would appreciate if you could point out what is wrong or if there is a better way
Answered by riský
for this specific case, you should use the node version instead: https://www.npmjs.com/package/highlight.js#user-content-nodejs-on-the-server
10 Replies
Alano EspañolOP
https://github.com/vercel/next.js/discussions/17919
^^This discussion seems closely related, will try these once I have the chance
^^This discussion seems closely related, will try these once I have the chance
Have you tried using next/script? https://nextjs.org/docs/app/building-your-application/optimizing/scripts
Not sure if it will help with this particular case or if it makes a difference but its worth checking if the solutions from the git issue you provided doesn't help, especially because the discussion is 3y old and still open.
for this specific case, you should use the node version instead: https://www.npmjs.com/package/highlight.js#user-content-nodejs-on-the-server
Answer
you should try your hardest to use native solutions for react (esp when modifying the website)
Alano EspañolOP
Had to use the node version of highlight and run
hljs.highlightAll(); in a useffectIt takes a bit of time before code gets highlighted sometimes
But it is good enough for now
Thanks to both of you guys for the assist
Yay!