How to Setup PrismJS with Nuxt 3

I've known quite some time that there exists a module that makes lines of code to be displayed a little prettier. Since these are the early times in working on this project (lesterlambac.com) and I am sharing snippets of codes, I want to share to you how I setup PrismJS.

There are actually 2 ways to use PrismJS on our nuxt project, it's either creating a plugin or a composable. I hope you are already familiar with these two. So, I'm just going to create two parts of this guide - using plugin and composable

How to Setup PrismJS with Nuxt3 as Plugin

Step 1: Install PrismJS

Of course, for us to be able to use the module, we must install Prismjs first on our project.

  yarn add prismjs

Step 2: Create a PrismJS Plugin

Then, in our Nuxt plugins folder and let's go ahead and create a prism.js file. Let's add these lines of code to the plugin file.

  
  import Prism from 'prismjs'
  import 'prismjs/themes/prism-tomorrow.css'

  export default defineNuxtPlugin((nuxtApp) => {
    return {
      provide: {
        Prism
      }
    }
  });
  

As you can see in our second import line, we can use different themes, just go ahead and check out beautiful themes on Github.

By returning the provide: { Prism } object. We are exposing the Prism module througout our app. And I think this is a downside in integrating PrismJS as Nuxt plugin.

Step 3: Load PrismJS

Actually even when you are just done with the second step, the module seems to work pretty well because by default it's initiates its magic when your app loads. However, the problem arise when we switch pages without reloading the entire page, the module looses it's functionality.

To combat this issue, whenever we have pages or components that utilizes prismjs, let's make sure that it loads when the app is mounted. On mounted hook inside our component or page, let's initialize PrismJS.

  onMounted(() => {
    const { $Prism } = useNuxtApp();
    $Prism.highlightAll();
  })

How to Setup PrismJS with Nuxt3 as Composable

Let's install Prismjs by running yarn add prismjs. After the installation, let's proceed with the composable.

Step 1: Create a PrismJS Composable

In the root directory of our Nuxt app, let's create a folder called composables and inside that folder let's create a file with a name of prism.js. Let's add these lines of code in that file.

  import Prism from 'prismjs'
  import 'prismjs/themes/prism-tomorrow.css'
  export default Prism

With this code, we are using a prism theme in our app (you can check more themes on Github) and exposing the Prism module.

Step 2: Load PrismJS Composable

Inside our page or component where we want to load PrismJS, we'll just have to import it from our composable and call forth the highlightAll() method when the page is mounted.

  
    import  Prism  from '~/composables/usePrism';
    onMounted(() => {
      Prism.highlightAll();
    })
  

How To Use PrismJS on Template

So, when all these things are setup proprely, we can add snippets of code in our template by wrapping it with <pre class="lang-js"> </pre>,
<code class="lang-js"> </code>, or a combination of both. So the output would be something like this:

  const ninjas = [
    { name: "Uzumaki Naruto", gender: "male", fruit: "🍍" },
    { name: "Hatake Kakashi", gender: "male", fruit: "🍌" },
    { name: "Uchiha Sasuke", gender: "male", fruit: "🍉" },
  ];

Just make sure you wrap them with an html markup of code or pre just like this:

  <pre class="lang-js"> 
    <code> 
      // Insert your code here...
    </code>
  </pre>