feat: support passing raw theme object on generation

README.md

@@ -407,7 +407,7 @@ console.log(root)
             }
           ]
         }
-      ]
+      ]s
     }
   ]
 }

packages/shikiji-compact/index.cjs

@@ -1,4 +1,7 @@
-module.exports.getHighlighter = async (...args) => {
+async function getHighlighter(...args) {
   const { getHighlighter } = await import('./dist/index.mjs')
   return getHighlighter(...args)
 }
+
+module.exports = getHighlighter
+module.exports.getHighlighter = getHighlighter

packages/shikiji-compact/src/index.ts

@@ -1,19 +1,15 @@
-import type { BuiltinLanguage, BuiltinTheme, BundledHighlighterOptions, CodeToHastOptions, CodeToThemedTokensOptions, LineOption, StringLiteralUnion, ThemedToken } from 'shikiji'
-import { bundledLanguages, bundledThemes, getHighlighter as getShikiji } from 'shikiji'
+import type { BuiltinLanguage, BuiltinTheme, CodeToHastOptions, CodeToThemedTokensOptions, MaybeGetter, ThemeInput, ThemedToken } from 'shikiji'
+import { bundledLanguages, bundledThemes, getHighlighter as getShikiji, toShikiTheme } from 'shikiji'
+import type { ThemeRegistration } from '../../shikiji/dist/core.mjs'
+import type { AnsiToHtmlOptions, HighlighterOptions } from './types'
 
 export const BUNDLED_LANGUAGES = bundledLanguages
 export const BUNDLED_THEMES = bundledThemes
 
 export * from './stub'
+export * from './types'
 
-export interface AnsiToHtmlOptions {
-  theme?: StringLiteralUnion<BuiltinTheme>
-  lineOptions?: LineOption[]
-}
-
-export interface HighlighterOptions extends BundledHighlighterOptions<BuiltinLanguage, BuiltinTheme> {
-  theme?: BuiltinTheme
-}
+export { toShikiTheme } from 'shikiji'
 
 export async function getHighlighter(options: HighlighterOptions = {}) {
   const themes = options.themes || []
@@ -75,3 +71,18 @@ export async function getHighlighter(options: HighlighterOptions = {}) {
     },
   }
 }
+
+export type Highlighter = ReturnType<typeof getHighlighter>
+
+export async function loadTheme(theme: BuiltinTheme | ThemeInput): Promise<ThemeRegistration> {
+  if (typeof theme === 'string')
+    return toShikiTheme(await bundledThemes[theme]().then(r => r.default))
+  else
+    return toShikiTheme(await normalizeGetter(theme))
+}
+
+async function normalizeGetter<T>(p: MaybeGetter<T>): Promise<T> {
+  return Promise.resolve(typeof p === 'function' ? (p as any)() : p).then(r => r.default || r)
+}
+
+export default getHighlighter

packages/shikiji-compact/src/types.ts

@@ -0,0 +1,17 @@
+import type { BuiltinLanguage, BuiltinTheme, BundledHighlighterOptions, LanguageRegistration, LineOption, StringLiteralUnion, ThemeRegistration } from 'shikiji'
+
+export interface AnsiToHtmlOptions {
+  theme?: StringLiteralUnion<BuiltinTheme>
+  lineOptions?: LineOption[]
+}
+
+export interface HighlighterOptions extends BundledHighlighterOptions<BuiltinLanguage, BuiltinTheme> {
+  theme?: BuiltinTheme
+}
+
+export interface IThemeRegistration extends ThemeRegistration {}
+
+export interface ILanguageRegistration extends LanguageRegistration {}
+
+export type Lang = StringLiteralUnion<BuiltinLanguage>
+export type Theme = StringLiteralUnion<BuiltinTheme>

packages/shikiji-compact/test/types.test.ts

@@ -1,4 +1,4 @@
-import { expect, expectTypeOf, test } from 'vitest'
+import { expect, test } from 'vitest'
 import * as shiki from 'shiki'
 import * as shikiji from '../src/index'
 
@@ -18,8 +18,6 @@ test('run', async () => {
   expect(s.getLoadedThemes()).toEqual(sj.getLoadedThemes())
   expect(s.getLoadedLanguages()).toEqual(sj.getLoadedLanguages())
 
-  expectTypeOf(s.codeToHtml).toMatchTypeOf(sj.codeToHtml)
-
   expect(sj.codeToThemedTokens('const a = 1', 'javascript'))
     .toEqual(s.codeToThemedTokens('const a = 1', 'javascript'))
 
@@ -41,7 +39,6 @@ test('run', async () => {
   expect.soft(keysDiff).toMatchInlineSnapshot(`
     [
       "ansiToThemedTokens",
-      "getTheme",
       "getBackgroundColor",
       "getForegroundColor",
       "setColorReplacements",
@@ -55,10 +52,7 @@ test('run', async () => {
   expect.soft(exportsDiff).toMatchInlineSnapshot(`
     [
       "FontStyle",
-      "default",
-      "loadTheme",
       "renderToHtml",
-      "toShikiTheme",
     ]
   `)
 })

packages/shikiji/src/core/bundle-factory.ts

@@ -1,4 +1,4 @@
-import type { BundledHighlighterOptions, CodeToHastOptions, CodeToThemedTokensOptions, CodeToTokensWithThemesOptions, HighlighterCoreOptions, HighlighterGeneric, LanguageInput, MaybeArray, RequireKeys, SpecialLanguage, ThemeInput } from '../types'
+import type { BundledHighlighterOptions, CodeToHastOptions, CodeToThemedTokensOptions, CodeToTokensWithThemesOptions, HighlighterCoreOptions, HighlighterGeneric, LanguageInput, MaybeArray, RequireKeys, SpecialLanguage, ThemeInput, ThemeRegistration, ThemeRegistrationRaw } from '../types'
 import { isSpecialLang, toArray } from './utils'
 import { getHighlighterCore } from './highlighter'
 
@@ -68,7 +68,10 @@ export function createdBundledHighlighter<BundledLangs extends string, BundledTh
 export function createSingletonShorthands<L extends string, T extends string >(getHighlighter: GetHighlighterFactory<L, T>) {
   let _shiki: ReturnType<typeof getHighlighter>
 
-  async function _getHighlighter(options: { theme: MaybeArray<T>; lang: MaybeArray<L | SpecialLanguage> }) {
+  async function _getHighlighter(options: {
+    theme: MaybeArray<T | ThemeRegistration | ThemeRegistrationRaw>
+    lang: MaybeArray<L | SpecialLanguage>
+  }) {
     if (!_shiki) {
       _shiki = getHighlighter({
         themes: toArray(options.theme),

packages/shikiji/src/core/context.ts

@@ -1,4 +1,4 @@
-import type { HighlighterCoreOptions, LanguageInput, MaybeGetter, ShikiContext, ThemeInput } from '../types'
+import type { HighlighterCoreOptions, LanguageInput, MaybeGetter, ShikiContext, ThemeInput, ThemeRegistration } from '../types'
 import { createOnigScanner, createOnigString, loadWasm } from '../oniguruma'
 import { Registry } from './registry'
 import { Resolver } from './resolver'
@@ -48,14 +48,14 @@ export async function getShikiContext(options: HighlighterCoreOptions = {}): Pro
     return _lang
   }
 
-  function getTheme(name: string) {
+  function getTheme(name: string | ThemeRegistration) {
     const _theme = _registry.getTheme(name!)
     if (!_theme)
       throw new Error(`[shikiji] Theme \`${name}\` not found, you may need to load it first`)
     return _theme
   }
 
-  function setTheme(name: string) {
+  function setTheme(name: string | ThemeRegistration) {
     const theme = getTheme(name)
     _registry.setTheme(theme)
     const colorMap = _registry.getColorMap()

packages/shikiji/src/core/highlighter.ts

@@ -18,6 +18,9 @@ export async function getHighlighterCore(options: HighlighterCoreOptions = {}):
 
     loadLanguage: context.loadLanguage,
     loadTheme: context.loadTheme,
+
+    getTheme: context.getTheme,
+
     getLoadedThemes: context.getLoadedThemes,
     getLoadedLanguages: context.getLoadedLanguages,
   }

packages/shikiji/src/core/index.ts

@@ -3,3 +3,5 @@ export { loadWasm } from '../oniguruma'
 export * from './context'
 export * from './highlighter'
 export * from './bundle-factory'
+
+export { toShikiTheme } from './normalize'

packages/shikiji/src/core/registry.ts

@@ -27,14 +27,14 @@ export class Registry extends TextMateRegistry {
     if (typeof theme === 'string')
       return this._resolvedThemes[theme]
     else
-      return theme
+      return this.loadTheme(theme)
   }
 
-  public loadTheme(theme: ThemeRegistration | ThemeRegistrationRaw) {
+  public loadTheme(theme: ThemeRegistration | ThemeRegistrationRaw): ThemeRegistration {
     const _theme = toShikiTheme(theme)
     if (_theme.name)
       this._resolvedThemes[_theme.name] = _theme
-    return theme
+    return _theme
   }
 
   public getLoadedThemes() {

packages/shikiji/src/types.ts

@@ -33,12 +33,12 @@ export type StringLiteralUnion<T extends U, U = string> = T | (U & Nothing)
 export type ResolveBundleKey<T extends string> = never extends T ? string : T
 
 export interface ShikiContext {
-  setTheme(name: string): {
+  setTheme(name: string | ThemeRegistration | ThemeRegistrationRaw): {
     theme: ThemeRegistration
     colorMap: string[]
   }
 
-  getTheme(name: string): ThemeRegistration
+  getTheme(name: string | ThemeRegistration | ThemeRegistrationRaw): ThemeRegistration
   getLangGrammar(name: string): IGrammar
 
   getLoadedThemes(): string[]
@@ -67,6 +67,9 @@ export interface HighlighterGeneric<BundledLangKeys extends string, BundledTheme
 
   loadTheme(...themes: (ThemeInput | BundledThemeKeys)[]): Promise<void>
   loadLanguage(...langs: (LanguageInput | BundledLangKeys | SpecialLanguage)[]): Promise<void>
+
+  getTheme(name: string | ThemeRegistration | ThemeRegistrationRaw): ThemeRegistration
+
   getLoadedLanguages(): string[]
   getLoadedThemes(): string[]
 }
@@ -109,7 +112,7 @@ export interface LanguageRegistration extends IRawGrammar {
 
 export interface CodeToThemedTokensOptions<Languages = string, Themes = string> {
   lang?: Languages | SpecialLanguage
-  theme?: Themes
+  theme?: Themes | ThemeRegistration | ThemeRegistrationRaw
   /**
    * Include explanation of why a token is given a color.
    *
@@ -144,11 +147,11 @@ export interface CodeToTokensWithThemesOptions<Languages = string, Themes = stri
    * }
    * ```
    */
-  themes: Partial<Record<string, Themes>>
+  themes: Partial<Record<string, Themes | ThemeRegistration | ThemeRegistrationRaw>>
 }
 
 export interface CodeOptionsSingleTheme<Themes = string> {
-  theme: Themes
+  theme: Themes | ThemeRegistration | ThemeRegistrationRaw
 }
 
 export interface CodeOptionsMultipleThemes<Themes = string> {
@@ -174,7 +177,7 @@ export interface CodeOptionsMultipleThemes<Themes = string> {
    *
    * @see https://github.com/antfu/shikiji#lightdark-dual-themes
    */
-  themes: Partial<Record<string, Themes>>
+  themes: Partial<Record<string, Themes | ThemeRegistration | ThemeRegistrationRaw>>
 
   /**
    * The default theme applied to the code (via inline `color` style).

packages/shikiji/test/core.test.ts

@@ -3,6 +3,7 @@ import { getHighlighterCore } from '../src/core'
 
 import js from '../src/assets/langs/javascript'
 import nord from '../dist/themes/nord.mjs'
+import mtp from '../dist/themes/material-theme-palenight.mjs'
 
 // @ts-expect-error no-types
 import onig from '../dist/onig.mjs'
@@ -109,4 +110,23 @@ describe('errors', () => {
     await expect(() => shiki.codeToHtml('console.log("Hi")', { lang: 'abc', theme: 'nord' }))
       .toThrowErrorMatchingInlineSnapshot('"[shikiji] Language `abc` not found, you may need to load it first"')
   })
+
+  it('highlight with raw theme registation', async () => {
+    const shiki = await getHighlighterCore({
+      themes: [nord],
+      langs: [js as any],
+      loadWasm: {
+        instantiator: obj => WebAssembly.instantiate(onig, obj),
+      },
+    })
+
+    const code = shiki.codeToHtml('console.log("Hi")', { lang: 'javascript', theme: mtp })
+    expect.soft(code)
+      .toMatchInlineSnapshot('"<pre class=\\"shiki material-theme-palenight\\" style=\\"background-color:#292D3E;color:#A6ACCD\\" tabindex=\\"0\\"><code><span class=\\"line\\"><span style=\\"color:#A6ACCD\\">console</span><span style=\\"color:#89DDFF\\">.</span><span style=\\"color:#82AAFF\\">log</span><span style=\\"color:#A6ACCD\\">(</span><span style=\\"color:#89DDFF\\">\\"</span><span style=\\"color:#C3E88D\\">Hi</span><span style=\\"color:#89DDFF\\">\\"</span><span style=\\"color:#A6ACCD\\">)</span></span></code></pre>"')
+
+    expect.soft(shiki.getLoadedThemes()).toContain('material-theme-palenight')
+
+    const code2 = shiki.codeToHtml('console.log("Hi")', { lang: 'javascript', theme: 'material-theme-palenight' })
+    expect.soft(code2).toBe(code)
+  })
 })

vitest.config.ts

@@ -1,3 +1,4 @@
+import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vitest/config'
 
 // @ts-expect-error no types
@@ -7,6 +8,11 @@ export default defineConfig({
   plugins: [
     wasmPlugin(),
   ],
+  resolve: {
+    alias: {
+      shikiji: fileURLToPath(new URL('./packages/shikiji/src/index.ts', import.meta.url)),
+    },
+  },
   test: {
     server: {
       deps: {