chore: experimental highlighting

entrypoints/injected/components/Code.tsx

@@ -1,6 +1,8 @@
 import { useAtom, useAtomValue } from 'jotai'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Clipboard } from 'react-feather'
+import { getHighlighterCore } from 'shiki/core'
+import getWasm from 'shiki/wasm'
 import { toTailwindcss } from 'transform-to-tailwindcss-core'
 import { toUnocssClass } from 'transform-to-unocss-core'
 import { useCopyToClipboard } from 'usehooks-ts'
@@ -16,6 +18,8 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
   const [, setCurrentSelection] = useAtom(currentSelection)
   const [unoResult, setUnoResult] = useState<{ title: string; code: string }[]>()
 
+  const [highlighCode, setHighlightCode] = useState(' ')
+
   const handleSelectionChange = useCallback(async () => {
     const node = figma.currentPage?.selection?.[0]
     setCurrentSelection(node ?? null)
@@ -74,6 +78,25 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
         code: cssCode,
       },
     ])
+
+    const highlighter = await getHighlighterCore({
+      themes: [
+        // or a dynamic import if you want to do chunk splitting
+        import('shiki/themes/vitesse-light.mjs'),
+      ],
+      langs: [import('shiki/langs/css.mjs')],
+      loadWasm: getWasm,
+    })
+
+    // optionally, load themes and languages after creation
+    await highlighter.loadTheme(import('shiki/themes/vitesse-light.mjs'))
+
+    const code = highlighter.codeToHtml(`html{${cssCode}}`, {
+      lang: 'css',
+      theme: 'vitesse-light',
+    })
+
+    setHighlightCode(code)
   }, [engine, isRem, setCurrentSelection])
 
   useEffect(() => {
@@ -153,20 +176,28 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
                   readOnly
                 ></input>
               ) : (
-                <textarea
-                  ref={inputRef}
-                  rows={1}
-                  autoComplete="off"
-                  className="px-4 h-auto py-4 lh-4.5 bg-#f5f5f5 cursor-text font-['Roboto_Mono'] resize-none scrollbar-hide"
-                  value={u.code}
-                  readOnly
-                  onSelect={(e) => {
-                    const target = e.target as HTMLInputElement
-                    const selection = target.value.substring(target.selectionStart || 0, target.selectionEnd || 0)
-                    if (!selection.trim()) return
-                    handleCopy(selection)()
-                  }}
-                ></textarea>
+                <>
+                  <textarea
+                    ref={inputRef}
+                    rows={1}
+                    autoComplete="off"
+                    className="hidden px-4 h-auto py-4 lh-4.5 bg-#f5f5f5 cursor-text font-['Roboto_Mono'] resize-none scrollbar-hide"
+                    value={u.code}
+                    readOnly
+                    onSelect={(e) => {
+                      const target = e.target as HTMLInputElement
+                      const selection = target.value.substring(target.selectionStart || 0, target.selectionEnd || 0)
+                      if (!selection.trim()) return
+                      handleCopy(selection)()
+                    }}
+                  ></textarea>
+                  <div
+                    className="px-4 h-auto py-4 lh-4.5 bg-#f5f5f5 cursor-text font-['Roboto_Mono'] scrollbar-hide [&_pre]:bg-transparent! [&_pre]:overflow-auto"
+                    dangerouslySetInnerHTML={{
+                      __html: highlighCode.replace('html', '').replace('{', '').replace('}', ''),
+                    }}
+                  ></div>
+                </>
               )}
             </div>
           ))}

package.json

@@ -45,6 +45,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
+    "shiki": "^1.1.7",
     "tailwind-merge": "^2.2.1",
     "transform-to-tailwindcss-core": "^0.0.14",
     "transform-to-unocss-core": "^0.0.15",