How to Use Highlight.js in a Nuxt Project demo repo

Highlight.js (opens new window) is a syntax highlighting tool for the Web.

Vue Highlight.js (opens new window) is a syntax highlighter component for Vue.

Before, I used Prism (opens new window) for syntax highlighting with vue-prism-component (opens new window) as the wrapper. But I find the plugin, e.g. Autolinker (opens new window) does not always work, so I switched to this.

# 👣 Steps

  1. Create a Nuxt project and install highlight.js and Vue Highlight.js. To use highlight.js v10, use the next version of Vue Highlight.js.
npx create-nuxt-app nuxt-demo
cd nuxt-demo
npm i highlight.js vue-highlight.js@next
  1. Create Highlight.js plugin in plugins/highlight.js. Import and register the languages, as well the style you want to use. I do not see html in the folder so I use xml instead.
import Vue from "vue";
import VueHighlightJS from "vue-highlight.js";

import javascript from "highlight.js/lib/languages/javascript";
import scss from "highlight.js/lib/languages/scss";
import xml from "highlight.js/lib/languages/xml";

import "highlight.js/styles/dracula.css";

Vue.use(VueHighlightJS, {
  languages: {
  1. Register the plugin in nuxt.config.js.
export default {
  plugins: ["@/plugins/highlight"]
  1. Use Highlight.js, e.g. in pages/highlight.vue.
    <h1>Highlight Demo</h1>

    <highlight-code lang="xml">{{ html }}</highlight-code>

    <!-- prettier-ignore -->
    <highlight-code lang="js">
      const me = {
        name: "Yasmin ZY", country: "Indonesia"

    <!-- prettier-ignore -->
    <highlight-code lang="scss">
      .grid {
        display: grid;
        @media (min-width: 576px) {
          grid-template-columns: 1fr 1fr;

export default {
  data() {
    return {
      html: `<article>
  <h1 class="title">How to Use Highlight.js in a Vue/Nuxt Project</h1>
  <p>Go to</p>

<style scoped>
pre:not(:last-of-type) {
  margin-bottom: 2rem;

# 📖 Explanation

Last updated: 2/28/2021, 6:58:54 AM