docs(copy-css-config): use highlight instead of plain string

Author: maiieul

apps/website/src/components/copy-css-config/copy-css-config.tsx

@@ -5,6 +5,7 @@ import { extractThemeCSS } from '@qwik-ui/utils';
 import { LuX } from '@qwikest/icons/lucide';
 import { useTheme } from 'qwik-themes';
 import globalCSS from '~/global.css?raw';
+import { Highlight } from '../highlight/highlight';
 
 export default component$(() => {
   const showSig = useSignal(false);
@@ -17,34 +18,30 @@ export default component$(() => {
     <>
       <Button
         onClick$={() => {
-          showSig.value = true;
           cssThemeOutput.value = extractThemeCSS(
             theme === 'dark' || theme === 'light'
               ? 'border-radius-0 simple primary-cyan-600 light base-slate'
               : theme,
             globalCSS,
           );
+          showSig.value = true;
         }}
       >
         Copy code
       </Button>
       <Modal
         bind:show={showSig}
-        class="my-animation h-full max-w-2xl overflow-x-hidden rounded-base bg-background p-8 text-foreground shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
+        class="my-animation h-[650px] max-w-2xl overflow-x-hidden rounded-base p-8 shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
       >
         <ModalHeader>
-          <h2 class="text-lg font-bold">Copy config</h2>
-          <p>
+          <h2 class="mb-2 text-lg font-bold">Copy config</h2>
+          <p class="mb-6">
             Copy and paste the following code into your global.css file to apply the
             styles.
           </p>
         </ModalHeader>
-        <ModalContent class="mb-2 pb-4 pt-2">
-          <div>
-            <pre>
-              <code>{cssThemeOutput.value}</code>
-            </pre>
-          </div>
+        <ModalContent>
+          <Highlight code={cssThemeOutput.value} language="css" />
         </ModalContent>
         <button
           onClick$={() => (showSig.value = false)}

apps/website/src/components/highlight/highlight.tsx

@@ -31,6 +31,11 @@ export const Highlight = component$(
   }: HighlightProps) => {
     const codeSig = useSignal('');
 
+    useVisibleTask$(({ track }) => {
+      track(() => codeSig.value);
+      console.log('codeSig changed: ', codeSig.value);
+    });
+
     const addShiki$ = $(async () => {
       let modifiedCode: string = code;
 
@@ -67,15 +72,17 @@ export const Highlight = component$(
       codeSig.value = str.toString();
     });
 
-    useTask$(async function createHighlightedCode() {
+    useTask$(async ({ track }) => {
+      track(() => code);
       if (!isDev) {
         await addShiki$();
       }
     });
 
     // eslint-disable-next-line qwik/no-use-visible-task
     useVisibleTask$(
-      async () => {
+      async ({ track }) => {
+        track(() => code);
         if (isDev) {
           await addShiki$();
         }