Merge branch 'main' of github.com:comarkdown/comark

Author: farnabaz

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

@@ -95,11 +95,13 @@ See [ComarkPlugin](/plugins) for available plugins.
 ```typescript
 import { renderHtml } 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 renderHtml('```js\nconsole.log("hi")\n```', {
   plugins: [
     highlight({
-      themes: { light: 'github-light', dark: 'github-dark' }
+      themes: { light: githubLight, dark: githubDark }
     })
   ],
 })

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

@@ -145,12 +145,14 @@ See [ComarkPlugin](/plugins) for available plugins.
 <script setup lang="ts">
 import { Markdown } 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: 'github-light',
-      dark: 'github-dark'
+      light: githubLight,
+      dark: githubDark
     }
   })
 ]
@@ -296,6 +298,8 @@ import { defineMarkdownComponent } 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 AppMarkdown = defineMarkdownComponent({
@@ -306,8 +310,8 @@ export const AppMarkdown = defineMarkdownComponent({
     mermaid(),
     highlight({
       themes: {
-        light: 'github-light',
-        dark: 'github-dark'
+        light: githubLight,
+        dark: githubDark
       },
     }),
   ],
@@ -359,6 +363,8 @@ Inherit plugins and components from another component, then layer your own on to
 ```typescript [markdown.ts]
 import { defineMarkdownComponent } 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'
@@ -367,7 +373,7 @@ import ProsePre from './components/ProsePre.vue'
 export const BaseMarkdown = defineMarkdownComponent({
   name: 'BaseMarkdown',
   plugins: [
-    highlight({ themes: { light: 'github-light', dark: 'github-dark' } }),
+    highlight({ themes: { light: githubLight, dark: githubDark } }),
   ],
   components: { ProsePre },
 })

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

@@ -125,10 +125,12 @@ 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: 'github-light', dark: 'github-dark' }
+    themes: { light: githubLight, dark: githubDark }
   })
 ]
 </script>

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

@@ -123,10 +123,12 @@ See [ComarkPlugin](/plugins) for available plugins.
 ```tsx [App.tsx]
 import { Markdown } 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: 'github-light', dark: 'github-dark' }
+    themes: { light: githubLight, dark: githubDark }
   })
 ]
 
@@ -251,6 +253,8 @@ import { defineMarkdownComponent } 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 AppMarkdown = defineMarkdownComponent({
@@ -261,8 +265,8 @@ export const AppMarkdown = defineMarkdownComponent({
     mermaid(),
     highlight({
       themes: {
-        light: 'github-light',
-        dark: 'github-dark'
+        light: githubLight,
+        dark: githubDark
       },
     }),
   ],
@@ -318,14 +322,16 @@ Inherit plugins and components from another component, then layer your own on to
 ```typescript [markdown/index.ts]
 import { defineMarkdownComponent } 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 BaseMarkdown = defineMarkdownComponent({
   name: 'BaseMarkdown',
-  plugins: [highlight({ themes: { light: 'github-light', dark: 'github-dark' } })],
+  plugins: [highlight({ themes: { light: githubLight, dark: githubDark } })],
   components: { pre: CodeBlock },
 })
 

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

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

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

@@ -110,6 +110,8 @@ See [ComarkPlugin](/plugins) for available plugins.
 import { Component } from '@angular/core'
 import { Markdown } 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',
@@ -121,7 +123,7 @@ export class AppComponent {
   content = '```js\nconsole.log("hello")\n```'
   plugins = [
     highlight({
-      themes: { light: 'github-light', dark: 'github-dark' },
+      themes: { light: githubLight, dark: githubDark },
     }),
   ]
 }

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

@@ -28,18 +28,20 @@ npm install shiki
 
 ## Usage
 
-Pass [bundled theme names](https://shiki.style/themes) as strings — no extra imports needed:
+Import themes from `@shikijs/themes` for type safety and tree-shaking:
 
 ```typescript
 import { parseMarkdown } 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 parseMarkdown(content, {
   plugins: [
     highlight({
       themes: {
-        light: 'github-light',
-        dark: 'github-dark'
+        light: githubLight,
+        dark: githubDark
       }
     })
   ]
@@ -54,10 +56,12 @@ With framework components:
 <script setup lang="ts">
 import { Markdown } 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: 'github-light', dark: 'github-dark' }
+    themes: { light: githubLight, dark: githubDark }
   })
 ]
 </script>
@@ -82,9 +86,11 @@ html.dark .shiki :deep(span) {
 ```tsx [React]
 import { Markdown } from '@comark/react'
 import highlight from '@comark/react/plugins/highlight'
+import githubLight from '@shikijs/themes/github-light'
+import githubDark from '@shikijs/themes/github-dark'
 
 <Markdown
-  plugins={[highlight({ themes: { light: 'github-light', dark: 'github-dark' } })]}
+  plugins={[highlight({ themes: { light: githubLight, dark: githubDark } })]}
 >
   {content}
 </Markdown>
@@ -101,20 +107,6 @@ import highlight from '@comark/react/plugins/highlight'
 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,
@@ -186,7 +178,7 @@ Pass any [Shiki transformer](https://shiki.style/guide/transformers) via `transf
 import { transformerNotationDiff } from '@shikijs/transformers'
 
 highlight({
-  themes: { light: 'github-light', dark: 'github-dark' },
+  themes: { light: githubLight, dark: githubDark },
   transformers: [transformerNotationDiff()]
 })
 ```
@@ -217,7 +209,7 @@ Returns a `ComarkPlugin` that enables Shiki syntax highlighting.
 
 | Option | Type | Default | Description |
 |---|---|---|---|
-| [`themes`](#options-themes) | `object` | Material themes | Light and dark theme names or registrations |
+| [`themes`](#options-themes) | `object` | Material themes | Light and dark theme 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>` |
@@ -226,18 +218,21 @@ Returns a `ComarkPlugin` that enables Shiki syntax highlighting.
 
 ### `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.
+Theme configuration for light and dark modes. Import from `@shikijs/themes`.
 
 ```typescript
+import githubLight from '@shikijs/themes/github-light'
+import githubDark from '@shikijs/themes/github-dark'
+
 highlight({
   themes: {
-    light: 'github-light',
-    dark: 'github-dark'
+    light: githubLight,
+    dark: githubDark
   }
 })
 ```
 
-**Default:** `{ light: 'material-theme-lighter', dark: 'material-theme-palenight' }`
+**Default:** `{ light: materialThemeLighter, dark: materialThemePalenight }`
 
 ### `languages`
 
@@ -301,7 +296,7 @@ When `true`, `material-theme-lighter` (light) and `material-theme-palenight` (da
 ```typescript
 highlight({
   registerDefaultThemes: false,
-  themes: { light: 'github-light', dark: 'github-dark' }
+  themes: { light: githubLight, dark: githubDark }
 })
 ```
 
@@ -316,15 +311,17 @@ highlight({
 ```typescript
 import { parseMarkdown } 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 parseMarkdown(content, {
-  plugins: [highlight({ themes: { light: 'github-light', dark: 'github-dark' } })]
+  plugins: [highlight({ themes: { light: githubLight, dark: githubDark } })]
 })
 ```
 
 ### Minimal Bundle
 
-Disable defaults and import only what you need. Prefer theme registration objects here so unused bundled themes are tree-shaken:
+Disable defaults and import only what you need:
 
 ```typescript
 import javascript from '@shikijs/langs/javascript'
@@ -349,7 +346,7 @@ import {
 } from '@shikijs/transformers'
 
 highlight({
-  themes: { light: 'github-light', dark: 'github-dark' },
+  themes: { light: githubLight, dark: githubDark },
   transformers: [
     transformerNotationDiff(),       // [!code ++] / [!code --]
     transformerNotationHighlight(),  // [!code highlight]

docs/content/5.api/1.parse.md

@@ -218,6 +218,8 @@ Creates a reusable parser function with pre-configured options. Unlike `parseMar
 ```typescript [parse.ts]
 import { createMarkdownParser } from 'comark'
 import highlight from 'comark/plugins/highlight'
+import githubLight from '@shikijs/themes/github-light'
+import githubDark from '@shikijs/themes/github-dark'
 import emoji from 'comark/plugins/emoji'
 import toc from 'comark/plugins/toc'
 
@@ -227,7 +229,7 @@ const parse = createMarkdownParser({
   autoClose: true,
   plugins: [
     highlight({
-      themes: { light: 'github-light', dark: 'github-dark' }
+      themes: { light: githubLight, dark: githubDark }
     }),
     emoji(),
     toc()
@@ -254,6 +256,8 @@ import { readdir, readFile, writeFile } from 'node:fs/promises'
 import { join } from 'node:path'
 import { renderHtmlFromDocument } from '@comark/html'
 import highlight from 'comark/plugins/highlight'
+import githubLight from '@shikijs/themes/github-light'
+import githubDark from '@shikijs/themes/github-dark'
 import toc from 'comark/plugins/toc'
 import emoji from 'comark/plugins/emoji'
 
@@ -262,7 +266,7 @@ async function buildSite(contentDir: string, outDir: string) {
   const parse = createMarkdownParser({
     plugins: [
       highlight({
-        themes: { light: 'github-light', dark: 'github-dark' }
+        themes: { light: githubLight, dark: githubDark }
       }),
       toc({ depth: 3 }),
       emoji()

docs/content/7.kb/2.migration-from-mdc.md

@@ -249,11 +249,13 @@ const parser = await createMarkdownParser({
 ```typescript [After]
 import { createMarkdownParser } from 'comark'
 import highlight from 'comark/plugins/highlight'
+import githubLight from '@shikijs/themes/github-light'
+import githubDark from '@shikijs/themes/github-dark'
 
 const parse = createMarkdownParser({
   plugins: [
     highlight({
-      themes: { light: 'github-light', dark: 'github-dark' }
+      themes: { light: githubLight, dark: githubDark }
     })
   ]
 })
@@ -417,6 +419,8 @@ A typical app needs at least two configurations: a full one for articles (highli
 ```typescript [composables/markdown.ts]
 import { defineMarkdownComponent, defineMarkdownDocumentComponent } from '@comark/vue'
 import highlight from 'comark/plugins/highlight'
+import githubLight from '@shikijs/themes/github-light'
+import githubDark from '@shikijs/themes/github-dark'
 import toc from 'comark/plugins/toc'
 import emoji from 'comark/plugins/emoji'
 import CustomAlert from '~/components/Alert.vue'
@@ -426,7 +430,7 @@ import ProsePre from '~/components/ProsePre.vue'
 export const ArticleMarkdown = defineMarkdownComponent({
   name: 'ArticleMarkdown',
   plugins: [
-    highlight({ themes: { light: 'github-light', dark: 'github-dark' } }),
+    highlight({ themes: { light: githubLight, dark: githubDark } }),
     toc({ depth: 3 }),
     emoji(),
   ],