feat(unify): removing prism and adding infrastructure for shiki

.vscode/settings.json

@@ -19,6 +19,7 @@
     "json"
   ],
   "editor.codeActionsOnSave": {
+    "source.fixAll": true,
     "source.fixAll.eslint": true
   },
   "typescript.tsdk": "node_modules/typescript/lib"

packages/frontend-shared/package.json

@@ -13,7 +13,9 @@
     "cypress:run": "cross-env TZ=America/New_York node ../../scripts/cypress run-ct --project ${PWD}",
     "dev": "vite --open"
   },
-  "dependencies": {},
+  "dependencies": {
+    "shiki": "^0.9.12"
+  },
   "devDependencies": {
     "@antfu/utils": "^0.3.0",
     "@cypress/vite-dev-server": "0.0.0-development",

packages/frontend-shared/src/components/ShikiHighlight.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref } from 'vue'
+import { highlighter, initHighlighter } from '../highlighter'
+
+const highlighterInitialized = ref(false)
+
+onBeforeMount(async () => {
+  await initHighlighter()
+  highlighterInitialized.value = true
+})
+
+const props = defineProps<{
+  code: string;
+  lang: 'javascript' | 'typescript' | 'json' | 'js' | 'ts';
+}>()
+
+const resolvedLang = computed(() => 'js' === props.lang ? 'javascript' : 'ts' === props.lang ? 'typescript' : props.lang)
+
+const highlightedCode = computed(() => {
+  return highlighter?.codeToHtml(props.code, props.lang)
+})
+</script>
+
+<template>
+  <div
+    v-if="highlighterInitialized"
+    v-html="highlightedCode"
+  />
+</template>
+
+<style>
+.shiki{
+  padding: 16px;
+}
+</style>

packages/frontend-shared/src/highlighter.ts

@@ -0,0 +1,18 @@
+import { Highlighter, getHighlighter, setOnigasmWASM, setCDN } from 'shiki'
+import onigasm from 'onigasm/lib/onigasm.wasm?url'
+
+setOnigasmWASM(onigasm)
+setCDN('/shiki/')
+
+export let highlighter: Highlighter
+
+export async function initHighlighter () {
+  if (highlighter) {
+    return
+  }
+
+  highlighter = await getHighlighter({
+    themes: ['cypress'],
+    langs: ['typescript', 'javascript', 'css', 'json'],
+  })
+}