fix: fixed notation-diff bg styles + improve custom transformer

Author: pheralb

apps/website/src/styles/shiki.css

@@ -69,15 +69,15 @@ pre.has-diff span.line.diff {
 }
 
 pre.has-diff span.line.diff.add {
-  @apply bg-green-300/20 dark:bg-green-700/20;
+  @apply bg-emerald-300/20! dark:bg-emerald-700/20!;
   &::before {
     content: "+";
     @apply absolute left-2 text-green-600 dark:text-green-400;
   }
 }
 
 pre.has-diff span.line.diff.remove {
-  @apply bg-red-300/20 opacity-70 dark:bg-red-600/20;
+  @apply bg-red-300/20! opacity-70 dark:bg-red-600/20!;
   &::before {
     content: "-";
     @apply absolute left-2 text-red-600 dark:text-red-400;

apps/website/src/utils/shiki/transformers/show-line-numbers.ts

@@ -6,12 +6,21 @@ const showLineNumbers = (): ShikiTransformer => {
     pre(node) {
       const rawMeta = this.options.meta?.__raw;
       const addLineNumbers = rawMeta?.includes("lineNumbers") || false;
-      const shikiStyles = node.properties.class;
-      if (addLineNumbers) {
-        node.properties.class = `${shikiStyles} shiki-line-numbers`;
+
+      if (!addLineNumbers) {
+        return;
+      }
+
+      const existingClass = node.properties.class;
+      if (Array.isArray(existingClass)) {
+        existingClass.push("shiki-line-numbers");
+      } else if (typeof existingClass === "string") {
+        node.properties.class = `${existingClass} shiki-line-numbers`;
+      } else {
+        node.properties.class = "shiki-line-numbers";
       }
     },
   };
 };
 
-export { showLineNumbers };
+export { showLineNumbers };