Prism.js is a great library to handle syntax highlighting for code blocks on a web page. However, since Prism runs automatically after being embedded (hence why you need to include it at the bottom of the HTML) content that is loaded later is not highlighted. After console logging the Prism object in Chrome developer tools I discovered a method called
highlightAll() which can be used to force Prism to rerun on the current page.
// Rerun Prism syntax highlighting on the current page Prism.highlightAll();
If you don’t want Prism rescanning the entire DOM you can selectively highlight elements with the
It’s as simple as that! I’m not sure why Prism doesn’t include this tip on the website.
Edit: The Prism folks tweeted me a link to the documentation on this: prismjs.com/extending.html#api
If you enjoyed this tutorial, please consider sponsoring my work on GitHub 🤗