Custom Shiki Theme Highlighting

[dbzx10299]

I was reading through the shiki docs on github and I found myself needing some custom highlighting. Is there a way to include some custom rules through the nuxt config under the highlight option?

[azat-io]

+1 for this

[gen9009]

+1 for this. I want to load my vscode-theme for my project. I tried "preload" and "themes" configuration, loaded the theme json, but it didn't work.I don't know how to configure it correctly.

[dbzx10299]

shikiji was merged into shikijs, that‘s why shikijs has new docs. They have examples here for how to write a custom theme.

You can write some code in vscode and use the editor token inspector in order to look up the specific tokens

[envygeeks]

Even though it's not documented in Nuxt Content and your editor may complain so you'll have to // @ts-expect-error you can use custom themes with Nuxt Content by shipping a ThemeRegistration. There is a hiccup between what the source actually does (you can see easily easily here and what the configuration actually claims to allow:

assets/css/themes/shiki/mocha.ts

import type { ThemeRegistration } from '@shikijs/types';
export const mocha: ThemeRegistration = Object.freeze({
  name: 'mocha',
  displayName: 'Catppuccin Mocha',
  semanticHighlighting: true,
  type: 'dark',

  colors: {
    /**
     * Color Config
     */
  },
});

nuxt.config.ts

// noinspection JSUnusedGlobalSymbols

import { mocha } from './assets/css/themes/shiki/mocha.ts'
export default defineNuxtConfig({
  content: {
    highlight: {
      theme: { // @ts-expect-error: It works
        dark: mocha, // @ts-expect-error: It works
        default: mocha, // @ts-expect-error: It works
        light: mocha, // @ts-expect-error: It works
      }, // @ts-expect-error: It works
      langs: [
        'ruby', 'python',
        'javascript', 'csharp', 'sql',
        'liquid', 'shell',
        'scss', 'ts',
      ],
    },
  },
});