Prismatic Syntax Highlighter Compatibility with Autoptimize Plugin

Out of the box the excellent Prismatic plugin has some compatibility issues with Autoptimize. Specifically the highlight.js portion, as the Prism themes seem to work just fine. But if you’ve chosen to use the highlight.js library and your styles aren’t showing up in your code, try this.

Navigate to

Autoptimize Settings > Javascript Options > Exclude scripts from Autoptimize

and then add the following to the excluded scripts list


highlight.js autoptimize fix

And here’s some random code as an example:

// the array that we are working with
var movieData = [
    Title: "12 Angry Men",
    Rating: 5,
    hasWatched: true
    Title: "Metropolis",
    Rating: 2,
    hasWatched: false
    Title: "The 3rd Man",
    Rating: 3,
    hasWatched: false

//creating a function that loops over the array and prints a string for each item in the array
function printMovieData() {
  movieData.forEach(function(movie) {
    if (movie.hasWatched === true) {
      var watchStatus = " have seen ";
    } else {
      var watchStatus = " have not seen ";
      "You" + watchStatus + movie.Title + " - " + movie.Rating + " stars"
} Workflow Explained


Building A CSS Grid Without “display: grid” Or “display: flex;”