How to use a custom PrismJS theme with Nuxt/Content

updated

PrismJS is great for making code blocks look pretty, it comes with a set of several themes out of the box, and there's also many more additional themes available as a separate package on NPM and Yarn. But what if none of those matches the color scheme of your website? With Nuxt you can easily use a custom CSS file to make your code blocks perfectly match the overall look of your site or blog. Here's how.

Information

The information in this blog post may be outdated, since it was regarding Nuxt 2 and Content v1, which have now been replaced with Nuxt 3 and Content v2 respectively. Please keep in mind that the problem this blog post solves may not be present in Nuxt 3/Content v2, or may not work even if the problem is present!

PrismJS is great for making code blocks look pretty, it comes with a set of several themes out of the box, and there’s also many more additional themes available as a separate package on NPM and Yarn. But what if none of those matches the color scheme of your website? With Nuxt you can easily use a custom CSS file to make your code blocks perfectly match the overall look of your site or blog. Here’s how.

Requirements

Before we begin, please note that while I can confirm it works when using target: 'static' in nuxt.config.js, I have not used PrismJS under target: 'server' and cannot say for certain whether it will work, or even be necessary.

If you haven’t already, install PrismJS in your project via npm install prismjs or yarn add prismjs, then add the following to your Nuxt config:

// nuxt.config.js

content: {
  markdown: {
    prism: {
      theme: false;
    }
  }
}

This will use let Prism and Content play nice together. The reason we are setting theme: false is because we don’t need to use this in static mode, instead we import a theme through a custom plugin that we’ll make ourselves. First, let’s create the theme.

Creating custom theme and importing to Prism

PrismJS “themes” are just CSS files that target specific classes used by Prism to style code blocks. Check out the CSS files in Prism’s themes directory or the many additional Prism themes available. Using these as a base, change the colors, sizes, and what have you to create your own theme.

Once you have a CSS file with your custom theme, place it in the same directory where you keep your global/main CSS file or Sass/SCSS files, probably /assets. I’ll assume you named it prism-theme.css but you can name it whatever, just make sure it has a .css extension.

Create a file named Prism.js within the /plugins directory of your project, and add the following lines:

import Prism from "prismjs";

import "assets/prism-theme.css";

Prism.languages.vue = Prism.languages.markup;

export default Prism;

That’s all you need to make Prism use your custom theme. You can import other PrismJS plugins and components through this file too, but that’s beyond the scope of this post. If you’d like, check out the custom theme I created for this site and use it as your own baseline. Happy theming!

References