✨Using highlight in Nuxt3.

Install

npm install highlight.js
npm install cheerio

package.json

{
  "devDependencies": {
    "nuxt": "3.0.0-rc.8"
  },
  "dependencies": {
    "cheerio": "^1.0.0-rc.12",
    "highlight.js": "^11.6.0",
  }
}

nuxt.config.js

export default defineNuxtConfig({
  css: [
    "~/assets/scss/main.scss"
  ]
})

assets/scss/_highlight.scss

@import '../../../node_modules/highlight.js/styles/nord.css';

can choose any theme you like. → /nodemodules/highlight.js/styles/.css

assets/scss/main.scss

@import 'highlight';

pages/index.vue

<script setup lang="ts">
import hljs from 'highlight.js'
import cheerio from 'cheerio'

const content = "<pre><code>console.log(1)</code></pre>"
const $ = cheerio.load(content);
$('pre code').each((_, elm) => {
  const result = hljs.highlightAuto($(elm).text());
  $(elm).html(result.value);
  $(elm).addClass('hljs');
});
const body = $.html()


</script>
<template>
  <div v-html="body" class="note-custom" />
</template>

Ref.

https://www.npmjs.com/package/nuxt-highlightjs
https://qlitre-weblog.com/nuxt3-microcms-blog-post-detail/