How to Re-Render Prism.js on New Code
Join the DZone community and get the full member experience.Join For Free
I recently switched to use a new syntax highlighter called Prism.js. Unlike other highlighters, Prism.js is extremely lightweight by default, and you can append additional add-ons to library for more options or new themes.
There are currently six different themes that you can choose from, and you can select which themes to include with the package at download. You can choose to just download the default theme or include all themes. Prism.js is designed to be very lightweight so adding additional features and themes will therefore increase the size of the package.
Therefore you need a way of re-rendering the Prism object again to render all code on the page.
Using the method highlightAll(), Prism will go through the page and search for pre and code tags and re-render all of them to style them correctly.
var precode = document.getElementById('application-code') Prism.highlightElement(precode);
Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.