Prismjs + Nuxtjs -Easy set up

This website is an ongoing project. It's not perfect, and it never will be; in fact, as you search the website you will see many things that you might see me advocate that I am not doing on the website.

I know it might seem an easy way out, but the fact is that I want to upgrade the website as I upgrade myself, so I want to share when I update the website with something new. Like that, I learn better, get documented and hopefully, it helps someone in the future.

So expect many posts about things I did on this website.

Today it will be about code snippets and their highlight while writing for example a code post.

When I created this website and started to write code posts I realize that the code was not highlighted and would not look good.

The best solution was adding Prismjs and after some fast search was easy to implement.

So let's do it:

First, we install Prismjs:

npm install --save prismjs clipboard

Then in the file nuxt.config.js add the plugin:

  plugins: [{ src: '~/plugins/prism' }]

After that go to your plugin folder in Nuxt and create a file named prism.js. Open it and write this code:

import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css' // You can add other themes if you want
export default Prism

There are many options besides the ones above, but there are the basics to make it work.

So now Prism is installed and we informed Nuxt about it we just need to add it to the page we need, normally _slug.vue

<script>
import Prism from '~/plugins/prism'
mounted() {
    Prism.highlightAll()
}

And that is all. With a few steps, you have nice highlights on your blog page.
If you like this post, feel free to follow me on Twitter and send me a message in case you have any doubt about this post 😊