fix(highlight): accept bundled theme names in themes option (#308)

Co-authored-by: Farnabaz <farnabaz@gmail.com>

Author: danielroe

.github/workflows/commit-signature.yml

@@ -80,40 +80,41 @@ jobs:
               )
               .join('\n')
 
-            const body = `${marker}
-## ✍️ Unsigned commit(s) detected
-
-@${author} one or more commits on this PR are **not signed**. Please sign them and update the PR.
-
-### Unsigned commits
-
-${list}
-
-### How to fix
-
-Sign your commits with GPG or SSH, then force-push the updated history:
-
-\`\`\`bash
-# Configure signing once (GPG example)
-git config --global commit.gpgsign true
-# or SSH: git config --global gpg.format ssh && git config --global user.signingkey ~/.ssh/id_ed25519.pub
-
-# Re-sign all commits on this branch (from the merge base)
-git rebase --exec 'git commit --amend --no-edit -S' ${baseSha}
-
-# Push the rewritten history
-git push --force-with-lease
-\`\`\`
-
-If you only need to re-sign the tip commit:
-
-\`\`\`bash
-git commit --amend --no-edit -S
-git push --force-with-lease
-\`\`\`
-
-See GitHub’s guide: [About commit signature verification](https://docs.github.com/en/authentication/managing-commit-signature-verification/about-commit-signature-verification).
-`
+            const body = [
+              marker,
+              '## ✍️ Unsigned commit(s) detected',
+              '',
+              `@${author} one or more commits on this PR are **not signed**. Please sign them and update the PR.`,
+              '',
+              '### Unsigned commits',
+              '',
+              list,
+              '',
+              '### How to fix',
+              '',
+              'Sign your commits with GPG or SSH, then force-push the updated history:',
+              '',
+              '```bash',
+              '# Configure signing once (GPG example)',
+              'git config --global commit.gpgsign true',
+              '# or SSH: git config --global gpg.format ssh && git config --global user.signingkey ~/.ssh/id_ed25519.pub',
+              '',
+              '# Re-sign all commits on this branch (from the merge base)',
+              `git rebase --exec 'git commit --amend --no-edit -S' ${baseSha}`,
+              '',
+              '# Push the rewritten history',
+              'git push --force-with-lease',
+              '```',
+              '',
+              'If you only need to re-sign the tip commit:',
+              '',
+              '```bash',
+              'git commit --amend --no-edit -S',
+              'git push --force-with-lease',
+              '```',
+              '',
+              'See GitHub\'s guide: [About commit signature verification](https://docs.github.com/en/authentication/managing-commit-signature-verification/about-commit-signature-verification).',
+            ].join('\n')
 
             if (existing) {
               await github.rest.issues.updateComment({

docs/content/3.rendering/2.html.md

@@ -88,13 +88,11 @@ See [ComarkPlugin](/plugins) for available plugins.
 ```typescript [render.ts]
 import { render } from '@comark/html'
 import highlight from '@comark/html/plugins/highlight'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 
 const html = await render('```js\nconsole.log("hi")\n```', {
   plugins: [
     highlight({
-      themes: { light: githubLight, dark: githubDark }
+      themes: { light: 'github-light', dark: 'github-dark' }
     })
   ],
 })

docs/content/3.rendering/3.vue.md

@@ -129,14 +129,12 @@ See [ComarkPlugin](/plugins) for available plugins.
 <script setup lang="ts">
 import { Comark } from '@comark/vue'
 import highlight from '@comark/vue/plugins/highlight'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 
 const plugins = [
   highlight({
     themes: {
-      light: githubLight,
-      dark: githubDark
+      light: 'github-light',
+      dark: 'github-dark'
     }
   })
 ]
@@ -282,8 +280,6 @@ import { defineComarkComponent } from '@comark/vue'
 import highlight from '@comark/vue/plugins/highlight'
 import math, { Math } from '@comark/vue/plugins/math'
 import mermaid, { Mermaid } from '@comark/vue/plugins/mermaid'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 import CustomAlert from './components/CustomAlert.vue'
 
 export const AppComark = defineComarkComponent({
@@ -294,8 +290,8 @@ export const AppComark = defineComarkComponent({
     mermaid(),
     highlight({
       themes: {
-        light: githubLight,
-        dark: githubDark
+        light: 'github-light',
+        dark: 'github-dark'
       },
     }),
   ],
@@ -347,8 +343,6 @@ Inherit plugins and components from another component, then layer your own on to
 ```typescript [comark.ts]
 import { defineComarkComponent } from '@comark/vue'
 import highlight from '@comark/vue/plugins/highlight'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 import toc from '@comark/vue/plugins/toc'
 import math, { Math } from '@comark/vue/plugins/math'
 import ProsePre from './components/ProsePre.vue'
@@ -357,7 +351,7 @@ import ProsePre from './components/ProsePre.vue'
 export const BaseComark = defineComarkComponent({
   name: 'BaseComark',
   plugins: [
-    highlight({ themes: { light: githubLight, dark: githubDark } }),
+    highlight({ themes: { light: 'github-light', dark: 'github-dark' } }),
   ],
   components: { ProsePre },
 })

docs/content/3.rendering/4.nuxt.md

@@ -125,12 +125,10 @@ See [ComarkPlugin](/plugins) for available plugins.
 ```vue [app.vue]
 <script setup lang="ts">
 import highlight from '@comark/nuxt/plugins/highlight'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 
 const plugins = [
   highlight({
-    themes: { light: githubLight, dark: githubDark }
+    themes: { light: 'github-light', dark: 'github-dark' }
   })
 ]
 </script>

docs/content/3.rendering/5.react.md

@@ -111,12 +111,10 @@ See [ComarkPlugin](/plugins) for available plugins.
 ```tsx [App.tsx]
 import { Comark } from '@comark/react'
 import highlight from '@comark/react/plugins/highlight'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 
 const plugins = [
   highlight({
-    themes: { light: githubLight, dark: githubDark }
+    themes: { light: 'github-light', dark: 'github-dark' }
   })
 ]
 
@@ -241,8 +239,6 @@ import { defineComarkComponent } from '@comark/react'
 import highlight from '@comark/react/plugins/highlight'
 import math, { Math } from '@comark/react/plugins/math'
 import mermaid, { Mermaid } from '@comark/react/plugins/mermaid'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 import CustomAlert from './components/CustomAlert'
 
 export const AppComark = defineComarkComponent({
@@ -253,8 +249,8 @@ export const AppComark = defineComarkComponent({
     mermaid(),
     highlight({
       themes: {
-        light: githubLight,
-        dark: githubDark
+        light: 'github-light',
+        dark: 'github-dark'
       },
     }),
   ],
@@ -310,16 +306,14 @@ Inherit plugins and components from another component, then layer your own on to
 ```typescript [comark/index.ts]
 import { defineComarkComponent } from '@comark/react'
 import highlight from '@comark/react/plugins/highlight'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 import toc from '@comark/react/plugins/toc'
 import math, { Math } from '@comark/react/plugins/math'
 import CodeBlock from './components/CodeBlock'
 
 // Base: highlight + shared prose overrides, used everywhere
 const BaseComark = defineComarkComponent({
   name: 'BaseComark',
-  plugins: [highlight({ themes: { light: githubLight, dark: githubDark } })],
+  plugins: [highlight({ themes: { light: 'github-light', dark: 'github-dark' } })],
   components: { pre: CodeBlock },
 })
 

docs/content/3.rendering/6.svelte.md

@@ -93,10 +93,11 @@ See [ComarkPlugin](/plugins) for available plugins.
 <script lang="ts">
   import { Comark } from '@comark/svelte'
   import highlight from '@comark/svelte/plugins/highlight'
-  import githubLight from '@shikijs/themes/github-light'
 
   const plugins = [
-    highlight({ theme: githubLight }),
+    highlight({
+      themes: { light: 'github-light', dark: 'github-dark' },
+    }),
   ]
 </script>
 

docs/content/3.rendering/7.angular.md

@@ -106,8 +106,6 @@ See [ComarkPlugin](/plugins) for available plugins.
 import { Component } from '@angular/core'
 import { ComarkComponent } from '@comark/angular'
 import highlight from '@comark/angular/plugins/highlight'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 
 @Component({
   selector: 'app-root',
@@ -119,7 +117,7 @@ export class AppComponent {
   content = '```js\nconsole.log("hello")\n```'
   plugins = [
     highlight({
-      themes: { light: githubLight, dark: githubDark },
+      themes: { light: 'github-light', dark: 'github-dark' },
     }),
   ]
 }

docs/content/4.plugins/1.built-in/syntax-highlight.md

@@ -28,20 +28,18 @@ npm install shiki
 
 ## Usage
 
-Import themes from `@shikijs/themes` for type safety and tree-shaking:
+Pass [bundled theme names](https://shiki.style/themes) as strings — no extra imports needed:
 
 ```typescript
 import { parse } from 'comark'
 import highlight from 'comark/plugins/highlight'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 
 const result = await parse(content, {
   plugins: [
     highlight({
       themes: {
-        light: githubLight,
-        dark: githubDark
+        light: 'github-light',
+        dark: 'github-dark'
       }
     })
   ]
@@ -56,12 +54,10 @@ With framework components:
 <script setup lang="ts">
 import { Comark } from '@comark/vue'
 import highlight from '@comark/vue/plugins/highlight'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 
 const plugins = [
   highlight({
-    themes: { light: githubLight, dark: githubDark }
+    themes: { light: 'github-light', dark: 'github-dark' }
   })
 ]
 </script>
@@ -86,11 +82,9 @@ html.dark .shiki :deep(span) {
 ```tsx [React]
 import { Comark } from '@comark/react'
 import highlight from '@comark/react/plugins/highlight'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 
 <Comark
-  plugins={[highlight({ themes: { light: githubLight, dark: githubDark } })]}
+  plugins={[highlight({ themes: { light: 'github-light', dark: 'github-dark' } })]}
 >
   {content}
 </Comark>
@@ -107,6 +101,20 @@ import githubDark from '@shikijs/themes/github-dark'
 Highlight code with different themes for light and dark modes. Both palettes are embedded as CSS custom properties, so there is no flash on theme switch. See all [available themes →](https://shiki.style/themes)
 
 ```typescript
+highlight({
+  themes: {
+    light: 'github-light',
+    dark: 'github-dark'
+  }
+})
+```
+
+You can also pass theme registration objects (for example from `@shikijs/themes`) when you want explicit control over what gets bundled:
+
+```typescript
+import githubLight from '@shikijs/themes/github-light'
+import githubDark from '@shikijs/themes/github-dark'
+
 highlight({
   themes: {
     light: githubLight,
@@ -178,7 +186,7 @@ Pass any [Shiki transformer](https://shiki.style/guide/transformers) via `transf
 import { transformerNotationDiff } from '@shikijs/transformers'
 
 highlight({
-  themes: { light: githubLight, dark: githubDark },
+  themes: { light: 'github-light', dark: 'github-dark' },
   transformers: [transformerNotationDiff()]
 })
 ```
@@ -209,7 +217,7 @@ Returns a `ComarkPlugin` that enables Shiki syntax highlighting.
 
 | Option | Type | Default | Description |
 |---|---|---|---|
-| [`themes`](#options-themes) | `object` | Material themes | Light and dark theme registrations |
+| [`themes`](#options-themes) | `object` | Material themes | Light and dark theme names or registrations |
 | [`languages`](#options-languages) | `LanguageRegistration[]` | `undefined` | Languages to preload |
 | [`transformers`](#options-transformers) | `ShikiTransformer[]` | `undefined` | Shiki transformers applied to every block |
 | [`preStyles`](#options-prestyles) | `boolean` | `false` | Add inline background/foreground styles to `<pre>` |
@@ -218,21 +226,18 @@ Returns a `ComarkPlugin` that enables Shiki syntax highlighting.
 
 ### `themes`
 
-Theme configuration for light and dark modes. Import from `@shikijs/themes`.
+Theme configuration for light and dark modes. Each value can be a [bundled theme name](https://shiki.style/themes) string (resolved from `shiki`) or a theme registration object.
 
 ```typescript
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
-
 highlight({
   themes: {
-    light: githubLight,
-    dark: githubDark
+    light: 'github-light',
+    dark: 'github-dark'
   }
 })
 ```
 
-**Default:** `{ light: materialThemeLighter, dark: materialThemePalenight }`
+**Default:** `{ light: 'material-theme-lighter', dark: 'material-theme-palenight' }`
 
 ### `languages`
 
@@ -296,7 +301,7 @@ When `true`, `material-theme-lighter` (light) and `material-theme-palenight` (da
 ```typescript
 highlight({
   registerDefaultThemes: false,
-  themes: { light: githubLight, dark: githubDark }
+  themes: { light: 'github-light', dark: 'github-dark' }
 })
 ```
 
@@ -311,17 +316,15 @@ highlight({
 ```typescript
 import { parse } from 'comark'
 import highlight from 'comark/plugins/highlight'
-import githubLight from '@shikijs/themes/github-light'
-import githubDark from '@shikijs/themes/github-dark'
 
 const result = await parse(content, {
-  plugins: [highlight({ themes: { light: githubLight, dark: githubDark } })]
+  plugins: [highlight({ themes: { light: 'github-light', dark: 'github-dark' } })]
 })
 ```
 
 ### Minimal Bundle
 
-Disable defaults and import only what you need:
+Disable defaults and import only what you need. Prefer theme registration objects here so unused bundled themes are tree-shaken:
 
 ```typescript
 import javascript from '@shikijs/langs/javascript'
@@ -346,7 +349,7 @@ import {
 } from '@shikijs/transformers'
 
 highlight({
-  themes: { light: githubLight, dark: githubDark },
+  themes: { light: 'github-light', dark: 'github-dark' },
   transformers: [
     transformerNotationDiff(),       // [!code ++] / [!code --]
     transformerNotationHighlight(),  // [!code highlight]