feat(module): devtools integration (#2196)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

devtools/app/composables/useShiki.ts

@@ -0,0 +1,34 @@
+import { createHighlighterCore } from 'shiki/core'
+import type { BuiltinLanguage, HighlighterCore } from 'shiki'
+import loadWasm from 'shiki/wasm'
+import MaterialThemeLighter from 'shiki/themes/material-theme-lighter.mjs'
+import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
+import VueLang from 'shiki/langs/vue.mjs'
+import MarkdownLang from 'shiki/langs/markdown.mjs'
+
+export const highlighter = shallowRef<HighlighterCore>()
+
+// A custom composable for syntax highlighting with Shiki since `@nuxt/mdc` relies on
+// a server endpoint to highlight code.
+export function useShiki() {
+  async function codeToHtml(code: string, lang: BuiltinLanguage | 'text' = 'text') {
+    if (!highlighter.value) {
+      highlighter.value = await createHighlighterCore({
+        themes: [MaterialThemeLighter, MaterialThemePalenight],
+        langs: [VueLang, MarkdownLang],
+        loadWasm
+      })
+    }
+
+    return highlighter.value.codeToHtml(code, {
+      lang,
+      themes: {
+        dark: 'material-theme-palenight',
+        default: 'material-theme-lighter',
+        light: 'material-theme-lighter'
+      }
+    })
+  }
+
+  return { codeToHtml }
+}