Nuxt content Shiki plugin returns : ERROR /home not found

Question

I'm trying to use syntax highlighter with @nuxt/content and Shiki.

After installing the shiki package in my nuxt.config.js project file.

import shiki from 'shiki'

...

export default {
  modules: ['@nuxt/content'],

  content: {
    markdown: {
      async highlighter() {
        const highlighter = await shiki.getHighlighter({
          theme: 'nord'
        })
        return (rawCode, lang) => {
          return highlighter.codeToHtml(rawCode, lang)
        }
      }
    }
  }
}

I got

Error
/home not found

But when I remove the highlighter method in the content, everything works fine. Can anyone help me please?

Answer 1

Instead of adding the import and await shiki, use the require method of using it.

  content: {
    markdown: {
      async highlighter () {
        const highlighter = await require('shiki').getHighlighter({
          theme: 'github-dark'
        })

        return (rawCode, lang) => {
          return highlighter.codeToHtml(rawCode, lang)
        }
      }
    }
  },

This is what I did to get it working.

An alternative solution to the above that also works would be:

import { getHighlighter } from 'shiki';

// ...

  content: {
    markdown: {
      async highlighter () {
        const highlighter = await getHighlighter({
          theme: 'github-dark'
        })

        return (rawCode, lang) => {
          return highlighter.codeToHtml(rawCode, lang)
        }
      }
    }
  },