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 6 different themes that you can choose from, 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 re-rendering the Prism object again to render all code on the page.
Using the method highlightAll() Prism will go through the page 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);
Learn how to code with Treehouse
- Learn projects with access to 1000+ videos
- Practice live with our Code Challenge Engine
- Get help in our members-only forums
- Access 100s of premium tutorials and downloadable content
- Members content consists of premium WordPress plugins
- CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
- In-depth development tutorials
- Priority tutorial requests
- No ads