feat: upgrade shiki, support custom embedded languages ts-type and …

…`vue-html` (#232)



Co-authored-by: Benjamin Canac <[email protected]>

package.json

@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.12.1",
-    "@shikijs/transformers": "^1.6.4",
+    "@shikijs/transformers": "^1.10.0",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
     "@vue/compiler-core": "^3.4.28",
@@ -100,7 +100,7 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.0",
     "scule": "^1.3.0",
-    "shiki": "^1.6.4",
+    "shiki": "^1.10.0",
     "ufo": "^1.5.3",
     "unified": "^11.0.4",
     "unist-builder": "^4.0.0",

src/runtime/highlighter/shiki.ts

@@ -1,4 +1,5 @@
-import { getHighlighterCore, addClassToHast, isSpecialLang, isSpecialTheme } from 'shiki/core'
+import type { CodeToHastOptions } from 'shiki/core'
+import { createHighlighterCore, addClassToHast, isSpecialLang, isSpecialTheme } from 'shiki/core'
 import type { HighlighterCore, LanguageInput, ShikiTransformer, ThemeInput } from 'shiki'
 import type { Element } from 'hast'
 import {
@@ -36,7 +37,7 @@ export function createShikiHighlighter({
   let configs: Promise<MdcConfig[]> | undefined
 
   async function _getShiki() {
-    const shiki = await getHighlighterCore({
+    const shiki = await createHighlighterCore({
       langs,
       themes,
       loadWasm: () => import('shiki/wasm')
@@ -73,6 +74,22 @@ export function createShikiHighlighter({
   const highlighter: Highlighter = async (code, lang, theme, options = {}) => {
     const shiki = await getShiki()
 
+    const codeToHastOptions: Partial<CodeToHastOptions<string, string>> = {
+      defaultColor: false,
+      meta: {
+        __raw: options.meta
+      }
+    }
+
+    // Custom embedded languages
+    if (lang === 'ts-type' || lang === 'typescript-type') {
+      lang = 'typescript'
+      codeToHastOptions.grammarContextCode = 'let a:'
+    } else if (lang === 'vue-html' || lang === 'vue-template') {
+      lang = 'vue'
+      codeToHastOptions.grammarContextCode = '<template>'
+    }
+
     const themesObject = typeof theme === 'string' ? { default: theme } : (theme || {})
     const loadedThemes = shiki.getLoadedThemes()
     const loadedLanguages = shiki.getLoadedLanguages()
@@ -114,11 +131,8 @@ export function createShikiHighlighter({
 
     const root = shiki.codeToHast(code.trimEnd(), {
       lang,
+      ...codeToHastOptions,
       themes: themesObject,
-      defaultColor: false,
-      meta: {
-        __raw: options.meta
-      },
       transformers: [
         ...transformers,
         {