in

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

wp-content/plugins/prismatic/lib/highlight/js/highlight-core.js

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 ";
    }
    console.log(
      "You" + watchStatus + movie.Title + " - " + movie.Rating + " stars"
    );
  });
}

Pantheon.io Workflow Explained

css3

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