Code Syntax Highlighting For Markdown In Nuxt 2

In a previous blog post I mentioned how to add code syntax highlighting for a nuxt project.

Since then I have noticed a few issues and decided to abandon that approach and go with this one.

Import the package:

npm i --save markdown-it-highlightjs

In nuxt.config.js

 modules: ["@nuxtjs/markdownit"],
  markdownit: {
    injected: true,
    use: ["markdown-it-highlightjs"],
  },

And where I differ from the post by Samuel is to just link to the CDN link instead. Referencing the link within the node modules folder would not work for me.

    link: [
      {
        rel: "stylesheet",
        type: "text/css",
        href: "//unpkg.com/@highlightjs/[email protected]/styles/tomorrow-night-blue.min.css",
      },
    ],

To choose another colour style select a css file from the highlight.js github page and remember to end with .min.css