How to Add Syntax Highlighting PrismJS to Nuxt

This article we will see how to add PrismJs to Nuxt to highlight our code snippets. We will add the prismJs to our nuxt content static site.

PrismJs is a light weight syntax highlighter which is built with modern web standard and have many programming language syntax supports.

PrismJs is very small in size, its 2 KB minified and g-zipped and the theme is less then 1 KB.

In this article, we will add prismJS to NuxtJS application with @nuxt/content module.

In Nuxt Content , PrismJS module handles all code highlighting in markdown content. It helps us to add the desired PrismJS theme easily in our Nuxt.js config file. You can easily change the theme if you don’t like the default one.

Add PrismJs to Nuxt Content

To add Prismjs syntax highlighter module to nuxt content we need to install the package.

npm install prism-themes
//FOR YARN//
yarn add prism-themes

Configure PrismJs in nuxt

The configuration is very simple just add the following code in the nuxt.config.js file.

content: {
  markdown: {
    prism: {
      theme: 'prism-themes/themes/prism-material-oceanic.css'
    }
  }
}

NOTE : To disable the them, just set prism to false.

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

How to change prismjs theme in nuxt?

To change the theme , you just have to change the theme property URL in the nuxt.config.js file. You can browse through the different themes here. Once you find it desire theme, click the link and copy the last CSS part from the URL and paste it to your config file.

Now add it the theme property

content: {
  markdown: {
    prism: {
      theme: 'prism-themes/themes/prism-atom-dark.css'
    }
  }
}

That’s how you can easily add prismjs in your nuxt content and highlight your code syntax in blogs.

Add PrismJs to Nuxt Content

Configure PrismJs in nuxt

How to change prismjs theme in nuxt?

Related Posts