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',
      ],
    },
  },
});

[davestewart]

I'll add my discoveries here too.

Building on top of @envygeeks 's advice above, here's how to create a custom CSS theme, where the syntax highlighting is baked in as CSS variables, which you just override in a stylesheet.

Links:

• https://davestewart.co.uk/blog/nuxt-data-fetching/
• https://github.com/davestewart/davestewart-site/blob/main/layers/1_content/nuxt.config.ts
• https://github.com/davestewart/davestewart-site/blob/main/layers/3_themes/main/assets/styles/formatting/_code.scss

Nuxt config:

import { defineNuxtConfig } from 'nuxt/config'
import { createCssVariablesTheme } from 'shiki/core'

export default defineNuxtConfig({
  content: {
    highlight: {
      theme: {
        // @ts-expect-error: custom theme object works at runtime
        default: createCssVariablesTheme({
          name: 'css-variables',
          variablePrefix: '--shiki-',
          variableDefaults: {},
          fontStyle: true,
        }),
      },
    },
  },
})

Stylesheet (from my own site; customise as you see fit):

:root {
  /* base **/
  --shiki-default-font-style: normal !important;
  --shiki-foreground: #0a3069;
  --shiki-background: #f5f5f8;

  /* comments, prolog, doctype, cdata */
  --shiki-token-comment: #93a1a1;

  /* atrule, attr-value, keyword */
  --shiki-token-keyword: #07a;

  /* punctuation */
  --shiki-token-punctuation: var(--shiki-foreground);

  /* property, tag, boolean, number, constant, symbol, deleted */
  --shiki-token-constant: var(--theme);

  /* string expressions (operators, entities, etc) */
  --shiki-token-string-expression: var(--theme);

  /* selector, attr-name, string, char, builtin, inserted */
  --shiki-token-string: var(--theme);

  /* function */
  --shiki-token-function: #dd4a68;

  /* regex, important, variable (closest match is parameter) */
  --shiki-token-parameter: #ee9900;

  /* links */
  --shiki-token-link: #0077aa;
}

.language-css {
  --shiki-token-constant: var(--shiki-foreground);
}

.language-md {
  --shiki-token-keyword: var(--theme);
  --shiki-token-link: var(--theme);
}

It took a lot of wrong turns to get here!

I don't know why this isn't documented or made more straightforward to accomplish.