Posts Learn Components Snippets Categories Tags About
/

How to add HightlightJs for Nuxt JS application

Learn how to add syntax highlighting for NuxtJs application and make it more appealing

8 months ago

6 mins read

100 views

In this post, you'll learn how to integrate Higlight.js for Nuxt Js application. For this example, I will assume that Highlight.js will only be used on a certain page and not globally available for all pages, this way it will only be available on the pages which only need it hence saving the load on every page. The steps are quite straightforward but don't miss any of them.

Step 1: Add Highlight.js

yarn add highlight.js
npm install highlight.js
Add highlight.js to the project, do run the command based on the package manager that you chose for the project.

Step 2: Initialize Highlight.Js


Let's assume that you want to highlight blog content that's accessible within "/blogs/_slug" page, in the _slug.vue page you will have to initialize the highlight.js code.
<template>
  <div v-html="blog.content"/>
</template>

<script>
import hljs from 'highlight.js'

export default {
  data () {
    return {
      blog: {}
    }
  },

  async fetch() {
    // get the blog content e
  }

  mounted () {
    /* init highlight.js */
    setTimeout(function () {
      document.querySelectorAll('pre')
        .forEach((block) => {
          hljs.highlightBlock(block)
        })
    }, 1000)
  }
}
</script>

<style src="highlight.js/styles/tomorrow.css"></style>

The code above consisting of 3 parts, the template part is to load the blog content which will be displayed on the page by outputting real HTML.

Secondly, the script section will contain the initialization part where the highlight.js is imported and invoked inside the mounted. The way how this works is that it'll find all "pre" tags on the page and loop through them while highlighting each of the blocks. Do note that we wrap this code inside a setTimeout function and this is necessary to ensure that the content is fully loaded before being highlighted.

Lastly, the style tag will import the theme that'll be used and in this example, it will be tomorrow.css. By default, it comes with 97 different styles as of this writing and I recommend that you look through their theme collection to get the right one for you.
new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Authored by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components