No longer able to add custom code highlight grammars

[ashour]

Environment

• Operating System: Darwin
• Node Version: v18.18.2
• Nuxt Version: 3.7.4
• CLI Version: 3.9.0
• Nitro Version: 2.6.3
• Package Manager: [email protected]
• Builder: -
• User Config: modules, runtimeConfig, routeRules, image, content
• Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected], @nuxt/[email protected]
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-thwkf4?file=content%2Findex.md

Describe the bug

It seems that we can no longer add custom code highlight grammars. We used to be able to via nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
import { readFileSync } from 'fs'

export default defineNuxtConfig({
  modules: ['@nuxt/content', '@nuxtjs/tailwindcss', '@nuxt/image'],
  content: {
    highlight: {
      theme: 'github-dark-dimmed',
      preload: [
        {
          id: 'gdscript',
          scopeName: 'source.gdscript',
          grammar: JSON.parse(
            readFileSync(
              './shiki/languages/gdscript.tmLanguage.json',
            ).toString(),
          ),
          aliases: ['gd', 'gdscript'],
        },
      ],
    },
  },
})

When have the exact config above now, you get no syntax highlighting. A TypeScript error in the nuxt.config.ts file says:

Type '{ id: string; scopeName: string; grammar: any; aliases: string[]; }' is not assignable to type 'Lang'.ts(2322)

I tried hunting down why this is happening but wasn't able to find much out. Just wanted to log it.

If this is no longer supported, you might want to remove it from the docs.

Additional context

No response

Logs

No response

[GerardSmit]

After some digging: it is expected to add the tmLanguage JSON directly into the preload-array instead of { id: 'gdscript', grammer: ... }.

Example:

// https://nuxt.com/docs/api/configuration/nuxt-config
import { readFileSync } from 'fs'

export default defineNuxtConfig({
  modules: ['@nuxt/content', '@nuxtjs/tailwindcss', '@nuxt/image'],
  content: {
    highlight: {
      theme: 'github-dark-dimmed',
      preload: [
        JSON.parse(fs.readFileSync('./shiki/languages/gdscript.tmLanguage.json', 'utf-8'))
      ],
    },
  },
})

The preload variable is passed into langs of Shikiji: https://github.com/nuxt-modules/mdc/blob/e744cd341799372ca0a631403809417de9640750/src/runtime/shiki/highlighter.ts#L18

You can read the docs about langs here: https://github.com/antfu/shikiji#fine-grained-bundle

[ashour]

@GerardSmit yeah, good on you. That seems to have done it.