How to Re-Render Prism.js on New Code

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.

Prism.js

Like other syntax highlighters, this is designed to change the code inside pre and code tags on load to display the code like it would look if the code was inside a code editor. The important part here is that on the page load event, this becomes a problem if you are using a syntax highlighter to display code you are creating with Javascript or content you load in with AJAX.

Therefore you need a way of re-rendering the Prism object again to render all code on the page.

When you include Prism Javascript files on the page it will create a Prism object. This has access to a number of different methods that you can use to update the code inside the pre and code tags.

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.

Prism.highlightAll();

If you only want to re-render a single element, you can select this element with Javascript and send this as a parameter into the highlightElement() method.

var precode = document.getElementById('application-code')
Prism.highlightElement(precode);

Prism Documentation