fix(styles): add dark and light mixins for .shiki class

Author: GZTimeWalker

src/GZCTF/ClientApp/src/styles/shared/Typography.module.css

@@ -3,6 +3,21 @@
   max-width: max-content;
   min-width: 100%;
 
+  & :global(.shiki),
+  & :global(.shiki) span {
+    @mixin dark {
+      font-style: var(--code-dark-font-style);
+      font-weight: var(--code-dark-font-weight);
+      text-decoration: var(--code-dark-text-decoration);
+    }
+
+    @mixin light {
+      font-style: var(--code-light-font-style);
+      font-weight: var(--code-light-font-weight);
+      text-decoration: var(--code-light-text-decoration);
+    }
+  }
+
   & :where(p) {
     word-break: break-word;
     word-wrap: break-word;

src/GZCTF/ClientApp/src/utils/marked/ShikiExtension.ts

@@ -58,6 +58,7 @@ const highlight = async (code: string, lang: string) => {
       dark: 'material-theme-darker',
       light: 'material-theme-lighter',
     },
+    cssVariablePrefix: '--code-',
     defaultColor: 'light-dark()',
     transformers: [
       transformerNotationDiff(),