feat: integration screen

web/src/composables/useShikiHighlighter.ts

@@ -0,0 +1,21 @@
+import { createHighlighter, type Highlighter } from 'shiki'
+
+let highlighterPromise: Promise<Highlighter> | null = null
+
+export function useShikiHighlighter() {
+	if (!highlighterPromise) {
+		highlighterPromise = createHighlighter({
+			themes: ['github-light', 'github-dark'],
+			langs: ['javascript'],
+		})
+	}
+	return highlighterPromise
+}
+
+export function highlightToHtml(highlighter: Highlighter, code: string, lang: string) {
+	return highlighter.codeToHtml(code, {
+		lang,
+		themes: { light: 'github-light', dark: 'github-dark' },
+		defaultColor: false,
+	})
+}