chore(deps): migrate to shiki

packages/histoire-app/package.json

@@ -33,7 +33,7 @@
     "@histoire/shared": "workspace:^",
     "@histoire/vendors": "workspace:^",
     "fuse.js": "^7.0.0",
-    "shiki-es": "^0.14.0"
+    "shiki": "^3.0.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.15",

packages/histoire-app/src/app/components/panel/StorySourceCode.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { Highlighter } from 'shiki-es'
+import type { Highlighter } from 'shiki'
 import type { Story, Variant } from '../../types'
 import { HstCopyIcon } from '@histoire/controls'
 import { unindent } from '@histoire/shared'
 import { Icon } from '@iconify/vue'
-import { getHighlighter } from 'shiki-es'
+import { createHighlighter } from 'shiki'
 import { clientSupportPlugins } from 'virtual:$histoire-support-plugins-client'
 import { computed, markRaw, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import { isDark } from '../../util/dark'
@@ -87,7 +87,7 @@ const displayedSourceCode = computed(() => {
 // HTML render
 
 onMounted(async () => {
-  highlighter.value = await getHighlighter({
+  highlighter.value = await createHighlighter({
     langs: [
       'html',
       'jsx',

packages/histoire/package.json

@@ -72,7 +72,7 @@
     "pathe": "^1.1.2",
     "picocolors": "^1.1.1",
     "sade": "^1.8.1",
-    "shiki-es": "^0.14.0",
+    "shiki": "^3.0.0",
     "sirv": "^3.0.0",
     "vite-node": "0.34.7"
   },

packages/histoire/src/node/markdown.ts

@@ -12,7 +12,7 @@ import { full as emoji } from 'markdown-it-emoji'
 import micromatch from 'micromatch'
 import path from 'pathe'
 import pc from 'picocolors'
-import { getHighlighter } from 'shiki-es'
+import { bundledLanguages, createHighlighter } from 'shiki'
 import { addStory, notifyStoryChange, removeStory } from './stories.js'
 import { slugify } from './util/slugify.js'
 
@@ -29,14 +29,13 @@ function notifyMarkdownListChange() {
 }
 
 export async function createMarkdownRenderer(ctx: Context) {
-  const highlighter = await getHighlighter({
-    theme: 'github-dark',
+  const highlighter = await createHighlighter({
+    themes: ['github-dark'],
+    langs: Object.keys(bundledLanguages), // not ideal but markdown-it does not provide async highlight
   })
 
   const md = new MarkdownIt({
-    highlight: (code, lang) => `<div class="htw-relative htw-not-prose __histoire-code"><div class="htw-absolute htw-top-0 htw-right-0 htw-text-xs htw-text-white/40">${lang}</div>${highlighter.codeToHtml(code, {
-      lang,
-    })}</div>`,
+    highlight: (code, lang) => `<div class="htw-relative htw-not-prose __histoire-code"><div class="htw-absolute htw-top-0 htw-right-0 htw-text-xs htw-text-white/40">${lang}</div>${highlighter.codeToHtml(code, { theme: 'github-dark', lang })}</div>`,
     linkify: true,
     html: true,
     breaks: false,

packages/histoire/src/node/vite.ts

@@ -107,7 +107,7 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
           ],
           include: optimizeDeps([
             'flexsearch',
-            'shiki-es',
+            'shiki',
             // Shiki dependencies
             'vscode-oniguruma',
             'vscode-textmate',