chore(deps): migrate to shiki

packages/histoire-app/package.json

@@ -34,7 +34,7 @@
     "@histoire/vendors": "workspace:^",
     "@types/flexsearch": "^0.7.6",
     "flexsearch": "0.7.21",
-    "shiki-es": "^0.2.0"
+    "shiki": "^1.1.2"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, markRaw, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import { Icon } from '@iconify/vue'
-import { getHighlighter, Highlighter } from 'shiki-es'
+import { getHighlighter, Highlighter } from 'shiki'
 import { HstCopyIcon } from '@histoire/controls'
 import { unindent } from '@histoire/shared'
 import { clientSupportPlugins } from 'virtual:$histoire-support-plugins-client'

packages/histoire/package.json

@@ -71,7 +71,7 @@
     "pathe": "^1.1.1",
     "picocolors": "^1.0.0",
     "sade": "^1.8.1",
-    "shiki-es": "^0.2.0",
+    "shiki": "^1.1.2",
     "sirv": "^2.0.3",
     "vite-node": "^0.34.6"
   },

packages/histoire/src/node/markdown.ts

@@ -1,6 +1,6 @@
 import MarkdownIt from 'markdown-it'
 import matter from 'gray-matter'
-import { getHighlighter } from 'shiki-es'
+import { getHighlighter, bundledLanguages } from 'shiki'
 import anchor from 'markdown-it-anchor'
 import attrs from 'markdown-it-attrs'
 import emoji from 'markdown-it-emoji'
@@ -29,13 +29,12 @@ function notifyMarkdownListChange () {
 
 export async function createMarkdownRenderer (ctx: Context) {
   const highlighter = await getHighlighter({
-    theme: 'github-dark',
+    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

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