Upgraded nuxt content and css-variables shiki theme is broken

[dbzx10299]

I just upgraded to the latest version of @nuxt/content ("@nuxt/content": "^2.9.0") and I noticed my code highlighting was no longer working. I have a nuxt.config.ts file with this config.

export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
  ],
  content: {
    highlight: {
      theme: 'css-variables'
    }
  }
})

The output I now get with my markdown is something like this, in which each token is black.

<span class="line" line="1">
  <span style="--shiki-default:#000007">const</span>
  <span style="--shiki-default:#000004"> a</span>
  <span style="--shiki-default:#000007"> =</span>
  <span style="--shiki-default:#000004"> true</span>
</span>

Before I had ouput like this:

<span style="ct-421856> ...

.ct-421856 {
  color: var(--shiki-token-string-expression)
}

Any help would be greatly appreciated, I am not sure what is going on that caused this.

[nobkd]

Since the switch to Shikiji (around Content v2.8.5 or so), the CSS variables theme is no longer supported (see https://github.com/antfu/shikiji#hard-breaking-changes).
It says that one should use dual themes (see https://github.com/antfu/shikiji#lightdark-dual-themes), but I haven't looked into this, sorry.

Probably related are:

• Shiki Css Variables is broken in release 2.8.5 #2352 (oh, well... yours)
• Support local theme json files #2398
• No longer able to add custom code highlight grammars #2384 with docs: update highlight.preload config #2395

Good luck!

[dbzx10299]

Thanks, I will give it a try with dual themes, otherwise it looks like it‘s back to shiki with a custom prose component

[dbzx10299]

I got everything to look like I want with the following code, I just installed shiki-es and created a custom ProsePre component. There is one major problem and that is each code block is being fetched from a cdn and the page is very slow and janky for a good 5-6 seconds, I don't know what I am missing here, what can I do to improve this?

<script setup>
import { getHighlighter, renderToHtml, loadTheme } from 'shiki-es'
// import * as shiki from 'shiki-es'

// console.log('shiki: ', shiki)

const props = defineProps({
  code: {
    type: String,
    default: ''
  },
  language: {
    type: String,
    default: null
  },
  filename: {
    type: String,
    default: null
  },
  highlights: {
    type: Array,
    default: []
  },
  meta: {
    type: String,
    default: null
  },
  class: {
    type: String,
    default: null
  }
})

const html = ref('')

const highlighter = await getHighlighter({
  theme: 'css-variables',
  langs: ['javascript', 'html', 'css', 'vue', 'bash']
})

const tokens = highlighter.codeToThemedTokens(props.code.trim(), props.language ?? undefined, 'css-variables', {
  includeExplanation: false
})

html.value = renderToHtml(tokens, {
  fg: highlighter.getForegroundColor('css-variables'),
  bg: highlighter.getBackgroundColor('css-variables'),
  elements: {
    pre({ children, className, style }) {
      return `<pre class="code-block_pre">${children}</pre>`
    },
    code({ children }) {
      return `<code class="code-block_code">${children}</code>`
    },
    line({ className, index, children}) {
      const isHighlighted = props.highlights?.includes(index + 1) ?? false
      return `<span class="${className} ${isHighlighted ? 'highlighted-line' : '' }">${children}</span>`
    }
  }
})
</script>

<template>
  <div class="code" v-html="html"></div>
</template>

[nobkd]

This sounds a bit like a known issue of Nuxt CLI:

Have you tried adding --no-fork (or --host) flag, or so?
See nuxt/cli#209 (and nuxt/cli#279)

[dbzx10299]

Could you clarify where/how to use —no-fork / —no-host? I looked through the entire command reference and I didn‘t see anything.

[nobkd]

AFAIK
nuxi dev --no-fork
or
nuxi dev --host

See nuxt/cli#209 (comment) and nuxt/cli#209 (comment)

(the nuxt commmnad should be the same as nuxi)

[dbzx10299]

I think I‘m experiencing a different problem. When I check the network tab, each code block is sending a fetch request to a cdn from what appears to be the getHighlighter call. When I was still using the css variables in an older version, there was not a network request for each code block. I‘m not sure but it seemed like the grammars and theme were being loaded from node modules rather than hitting a cdn. This pre component I built is also causing npm run generate to fail as well