Change Markdown Code Highlight Theme in Nuxt Content Module

A quick guide on how to change your code highlighting theme in the Nuxt content module.

Article thumbnail image

Using Prism Themes

First, install prism-themes.

# Using NPM
npm install prism-themes
# Using Yarn
yarn add prism-themes

Next, edit the content.markdown.prism.theme property in nuxt.config.js to the desired theme, for example:

export default {
  // ...
  markdown: {
    prism: {
      theme: "prism-themes/themes/prism-material-oceanic.css"
  // ...

Here's a list of all available Prism themes.