Add PrismJS Code Highlighting to Foundation for Sites

Note: This is for a zurb template build via the CLI install and more complex gulp workflow. Results were discovered and tested while working on foundation.d11z.com/.

To include the PrismJS code highlighting library into Foundation’s webpack build, I had to do a little bit more than just run npm i prismjs. It’s not difficult, but it does require editing a few extra files in tandem.

Here’s a short list for future reference and a quick jump menu:

  1. Install Node Modules
  2. Update Gulpfile
  3. Configure Webpack
  4. Import PrismJS Library
  5. Check for CSS Conflicts
  6. Code Example

Install Node Modules

First install all necessary node modules:

npm install prismjs --save
npm install --save-dev babel-plugin-prismjs css-loader style-loader

Update Gulpfile

Then update the webpackConfig section in gulpfile.babel.js to include the css loader. CSS Loader is necessary to use themes with PrismJS. The webpack section should look like this:

let webpackConfig = {
  mode: PRODUCTION ? "production" : "development",
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            compact: false
          }
        }
      },
# START NEW RULE
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
# END NEW RULE
    ]
  },
  devtool: !PRODUCTION && "source-map"
};

Configure Webpack

Next, to configure the Prism library’s configuration, edit .babelrc like so:

{
  "presets": ["@babel/preset-env"],
  "compact": false,
# START NEW RULE
  "plugins": [
    [
      "prismjs",
      {
        "languages": ["javascript", "css", "markup"],
        "plugins": ["line-numbers", "file-highlight"],
        "theme": "okaidia",
        "css": true
      }
    ]
  ]
# END NEW RULE
}

Import PrismJS Library

Now that all the config is setup and ready to go, we can finally add a simple import and init function to make it part of app.js by adding this line to src/assets/js/app.js just after importing jquery and what-input:

import Prism from "prismjs";

Note: I read somewhere that Prism.highlightAll(); needs to be called, but it seems to auto init without it here ¯\_(ツ)_/¯.

Check for CSS Conflicts

One more thing worth noting is that Foundation’s styles add a border to <code> tags, which conflicts with Prism’s styles. I recommend either removing it altogether when editing src/assets/scss/_settings.scss or on a per component basis for finer control.

Code Example

Now that everything is completely setup, we can simply check if it’s working by adding a little HTML to a page:

<pre class="line-numbers" data-start="-2">
<code class="language-javascript">{
  "presets": ["@babel/preset-env"],
  "compact": false,
  "plugins": [
    [
      "prismjs",
      {
        "languages": ["javascript", "css", "markup"],
        "plugins": ["line-numbers", "file-highlight"],
        "theme": "okaidia",
        "css": true
      }
    ]
  ]
}</code>
</pre>

That should look like this:

Foundation using Prism like a boss!

View the source code for my foundation.d11z.com project on Github.

Resources

A few links that helped me figure this out: