starlight-theme-nova 0.0.4 → 0.0.6

package/lib/shiki.css

@@ -1,4 +1,4 @@
-@import '@shikijs/twoslash/style-rich.css';
+@import 'shiki-twoslash-renderer/style.css';
 
 .sl-markdown-content .astro-code {
   padding: 0;
@@ -59,7 +59,7 @@
   background-color: var(--shiki-light-bg);
 }
 
-html.dark .astro-code {
+html[data-theme='dark'] .astro-code {
   --twoslash-popup-bg: var(--shiki-dark-bg);
   background-color: var(--shiki-dark-bg);
 }
@@ -72,14 +72,14 @@ html.dark .astro-code {
   text-decoration: var(--shiki-light-text-decoration);
 }
 
-html.dark .astro-code,
-html.dark .astro-code span {
+html[data-theme='dark'] .astro-code,
+html[data-theme='dark'] .astro-code span {
   color: var(--shiki-dark);
   font-style: var(--shiki-dark-font-style);
   font-weight: var(--shiki-dark-font-weight);
   text-decoration: var(--shiki-dark-text-decoration);
 }
-
+/* 
 .astro-code.twoslash .twoslash-popup-container {
   transform: translateY(1.8em);
 }
@@ -90,4 +90,4 @@ html.dark .astro-code span {
 
 .astro-code.twoslash .twoslash-query-line .twoslash-popup-container {
   transform: translateY(1.3em);
-}
+} */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-theme-nova",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
@@ -26,10 +26,12 @@
     "src"
   ],
   "dependencies": {
-    "@shikijs/transformers": "^1.29.2",
-    "@shikijs/twoslash": "^1.29.2",
+    "@shikijs/transformers": "^3.2.1",
+    "@shikijs/twoslash": "^3.2.1",
+    "@shikijs/types": "^3.2.1",
     "astro-theme-toggle": "^0.5.1",
-    "hast-util-is-element": "^3.0.0"
+    "hast-util-is-element": "^3.0.0",
+    "shiki-twoslash-renderer": "0.0.2"
   },
   "devDependencies": {
     "@astrojs/starlight": "^0.32.2",

package/src/components/MarkdownContent.astro

@@ -14,3 +14,7 @@ import CodeCopy from './CodeCopy.astro'
 </style>
 
 <CodeCopy />
+<script>
+  import { register } from 'shiki-twoslash-renderer/elements'
+  register()
+</script>

package/src/shiki-config.ts

@@ -4,23 +4,33 @@ import {
   transformerNotationHighlight,
 } from '@shikijs/transformers'
 import { transformerTwoslash } from '@shikijs/twoslash'
+import type { ShikiTransformer } from '@shikijs/types'
 import type { ShikiConfig } from 'astro'
+import { createRenderer } from 'shiki-twoslash-renderer'
 
 import { transformerCopyButton } from './shiki-transformer-copy-button'
 
 export function createShikiConfig(options: { twoslash: boolean }): ShikiConfig {
+  const transformers: ShikiTransformer[] = [
+    transformerNotationDiff(),
+    transformerNotationHighlight(),
+    transformerMetaHighlight(),
+    transformerCopyButton(),
+    options.twoslash
+      ? transformerTwoslash({
+          renderer: createRenderer(),
+          explicitTrigger: true,
+        })
+      : undefined,
+  ].filter((x) => !!x)
+
   return {
     themes: {
       light: 'one-light',
       dark: 'github-dark-dimmed',
     },
     defaultColor: false,
-    transformers: [
-      transformerNotationDiff(),
-      transformerNotationHighlight(),
-      transformerMetaHighlight(),
-      transformerCopyButton(),
-      options.twoslash ? transformerTwoslash() : undefined,
-    ].filter((x) => !!x),
+    // @ts-expect-error: Astro is using outdated Shiki v1
+    transformers: transformers,
   }
 }

package/src/shiki-transformer-copy-button.ts

@@ -1,8 +1,6 @@
-import type { ShikiConfig } from 'astro'
+import type { ShikiTransformer } from '@shikijs/types'
 import { isElement } from 'hast-util-is-element'
 
-type ShikiTransformer = NonNullable<ShikiConfig['transformers']>[number]
-
 const name = 'starlight-theme-nova-shiki-transformer-copy-button'
 
 /**