How To Setup PrismJS for nuxt 3?

[JenuelDev]

Hi! I started creating website projects for nuxt, and I use nuxt content for some content, of the website. Can I ask how to setup it in Nuxt 3 project? thanks, thanks 👍🏻

[JenuelDev]

I now figured it out, it seems by default, the codehighlighing is disabled by default. so to enable it you have to set up the configuration in the nuxt config configuration. https://content.nuxtjs.org/api/configuration#highlight.

So I have to add something like this.

export default defineNuxtConfig({
  content: {
    highlight: {
      theme: 'one-dark-pro'
      }
    }
  }
})

This are the available themes:

| 'css-variables'
  | 'dark-plus'
  | 'dracula-soft'
  | 'dracula'
  | 'github-dark-dimmed'
  | 'github-dark'
  | 'github-light'
  | 'hc_light'
  | 'light-plus'
  | 'material-darker'
  | 'material-default'
  | 'material-lighter'
  | 'material-ocean'
  | 'material-palenight'
  | 'min-dark'
  | 'min-light'
  | 'monokai'
  | 'nord'
  | 'one-dark-pro'
  | 'poimandres'
  | 'rose-pine-dawn'
  | 'rose-pine-moon'
  | 'rose-pine'
  | 'slack-dark'
  | 'slack-ochin'
  | 'solarized-dark'
  | 'solarized-light'
  | 'vitesse-dark'
  | 'vitesse-light'