Merge branch 'work' into ci/test-satori

Author: GZTimeWalker

src/GZCTF/ClientApp/package.json

@@ -14,16 +14,16 @@
   "dependencies": {
     "@babel/core": "^7.27.4",
     "@emotion/react": "^11.14.0",
-    "@mantine/carousel": "^8.0.2",
-    "@mantine/colors-generator": "^8.0.2",
-    "@mantine/core": "^8.0.2",
-    "@mantine/dates": "^8.0.2",
-    "@mantine/dropzone": "^8.0.2",
-    "@mantine/emotion": "^8.0.2",
-    "@mantine/form": "^8.0.2",
-    "@mantine/hooks": "^8.0.2",
-    "@mantine/modals": "^8.0.2",
-    "@mantine/notifications": "^8.0.2",
+    "@mantine/carousel": "^8.1.0",
+    "@mantine/colors-generator": "^8.1.0",
+    "@mantine/core": "^8.1.0",
+    "@mantine/dates": "^8.1.0",
+    "@mantine/dropzone": "^8.1.0",
+    "@mantine/emotion": "^8.1.0",
+    "@mantine/form": "^8.1.0",
+    "@mantine/hooks": "^8.1.0",
+    "@mantine/modals": "^8.1.0",
+    "@mantine/notifications": "^8.1.0",
     "@marsidev/react-turnstile": "^1.1.0",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
@@ -44,46 +44,45 @@
     "katex": "^0.16.22",
     "lz-string": "^1.5.0",
     "marked": "^15.0.12",
-    "marked-highlight": "^2.2.1",
     "pdfjs-dist": "4.8.69",
-    "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-error-boundary": "^6.0.0",
     "react-i18next": "^15.5.2",
     "react-pdf": "^9.2.1",
     "react-router": "^7.6.2",
+    "shiki": "^3.6.0",
     "swr": "^2.3.3"
   },
   "devDependencies": {
+    "@shikijs/transformers": "^3.6.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/chroma-js": "^3.1.1",
     "@types/katex": "^0.16.7",
-    "@types/node": "^22.15.30",
+    "@types/node": "^24.0.0",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.6",
+    "@types/react": "^19.1.7",
     "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.5.1",
+    "@vitejs/plugin-react": "^4.5.2",
     "axios": "^1.9.0",
     "babel-plugin-prismjs": "^2.1.0",
     "form-data": "~4.0.3",
     "globals": "^16.2.0",
     "lodash": "^4.17.21",
-    "oxlint": "^0.18.0",
+    "oxlint": "^1.0.0",
     "postcss": "^8.5.4",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "~3.5.3",
     "prettier-plugin-sort-json": "^4.1.1",
     "rollup": "^4.42.0",
-    "swagger-typescript-api": "^13.2.0",
+    "swagger-typescript-api": "^13.2.1",
     "tslib": "^2.8.1",
     "typescript": "5.8.3",
     "vite": "npm:rolldown-vite@^6.3.18",
     "vite-plugin-banner": "^0.8.1",
     "vite-plugin-optimize-css-modules": "^1.2.0",
     "vite-plugin-pages": "^0.33.0",
-    "vite-plugin-prismjs": "^0.0.11",
     "vite-plugin-webfont-dl": "^3.10.5",
     "vite-tsconfig-paths": "^5.1.4"
   },

src/GZCTF/ClientApp/pnpm-lock.yaml

@@ -1,10 +1,9 @@
 import { Text, TextProps, TypographyStylesProvider } from '@mantine/core'
 import 'katex/dist/katex.min.css'
 import { Marked } from 'marked'
-import { markedHighlight } from 'marked-highlight'
-import Prism from 'prismjs'
-import { forwardRef } from 'react'
-import { KatexExtension } from '@Utils/KatexExtension'
+import { forwardRef, useMemo, use } from 'react'
+import { KatexExtension } from '@Utils/marked/KatexExtension'
+import { ShikiExtension } from '@Utils/marked/ShikiExtension'
 import classes from '@Styles/Typography.module.css'
 
 export interface MarkdownProps extends React.ComponentPropsWithoutRef<'div'> {
@@ -17,19 +16,20 @@ interface InlineMarkdownProps extends TextProps {
 
 export const InlineMarkdown = forwardRef<HTMLParagraphElement, InlineMarkdownProps>((props, ref) => {
   const { source, ...others } = props
-  const marked = new Marked()
 
-  marked.use(KatexExtension()).setOptions({
-    silent: true,
-  })
+  const inlineMarked = useMemo(() => {
+    const instance = new Marked()
+    instance.use(KatexExtension()).setOptions({ silent: true })
+    return instance
+  }, [])
 
   return (
     <Text
       ref={ref}
       {...others}
       className={classes.inline}
       dangerouslySetInnerHTML={{
-        __html: marked.parseInline(source) ?? '',
+        __html: inlineMarked.parseInline(source) ?? '',
       }}
     />
   )
@@ -38,27 +38,21 @@ export const InlineMarkdown = forwardRef<HTMLParagraphElement, InlineMarkdownPro
 export const Markdown = forwardRef<HTMLDivElement, MarkdownProps>((props, ref) => {
   const { source, ...others } = props
 
-  Prism.manual = true
+  const marked = useMemo(() => {
+    const instance = new Marked()
+    instance.use(KatexExtension()).use(ShikiExtension()).setOptions({ silent: true })
+    return instance
+  }, [])
 
-  const marked = new Marked(
-    markedHighlight({
-      highlight(code, lang) {
-        if (lang && Prism.languages[lang]) {
-          return Prism.highlight(code, Prism.languages[lang], lang)
-        } else {
-          return code
-        }
-      },
-    })
-  )
+  const htmlPromise = useMemo(() => {
+    return marked.parse(source) as Promise<string>
+  }, [marked, source])
 
-  marked.use(KatexExtension()).setOptions({
-    silent: true,
-  })
+  const resolvedHtml = use(htmlPromise)
 
   return (
     <TypographyStylesProvider ref={ref} {...others}>
-      <div className={classes.root} dangerouslySetInnerHTML={{ __html: marked.parse(source) }} />
+      <div className={classes.root} dangerouslySetInnerHTML={{ __html: resolvedHtml }} />
     </TypographyStylesProvider>
   )
 })

src/GZCTF/ClientApp/src/components/MarkdownRenderer.tsx

@@ -4,7 +4,7 @@ import { mdiClose } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import { Wsrx, WsrxError, WsrxErrorKind, WsrxFeature, WsrxOptions, WsrxState } from '@xdsec/wsrx'
 import { t } from 'i18next'
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { createContext, useCallback, use, useEffect, useMemo, useState } from 'react'
 import { showErrorMsg } from '@Utils/Shared'
 import { useConfig } from '@Hooks/useConfig'
 
@@ -159,7 +159,7 @@ export const WsrxProvider: React.FC<React.PropsWithChildren> = ({ children }) =>
 }
 
 export const useWsrx = () => {
-  const context = useContext(WsrxContext)
+  const context = use(WsrxContext)
   if (!context) {
     throw new Error('useWsrx must be used within a WsrxProvider')
   }

src/GZCTF/ClientApp/src/components/WsrxProvider.tsx

@@ -85,85 +85,6 @@
     line-height: var(--mantine-line-height-sm);
     tab-size: 4;
     hyphens: none;
-
-    & :global(.namespace) {
-      opacity: 0.8;
-    }
-
-    & :global(.token.id),
-    & :global(.token.important),
-    & :global(.token.keyword) {
-      font-weight: bold;
-    }
-
-    & :global(.token.atrule),
-    & :global(.token.boolean),
-    & :global(.token.constant),
-    & :global(.token.function),
-    & :global(.token.id),
-    & :global(.token.important),
-    & :global(.token.keyword),
-    & :global(.token.symbol) {
-      color: light-dark(#7c4dff, #c792ea);
-    }
-
-    & :global(.token.attr-name),
-    & :global(.token.builtin),
-    & :global(.token.class) {
-      color: light-dark(#39adb5, #ffcb6b);
-    }
-
-    & :global(.token.attr-value),
-    & :global(.token.attribute),
-    & :global(.token.pseudo-class),
-    & :global(.token.pseudo-element) {
-      color: light-dark(#f6a434, #a5e844);
-    }
-
-    & :global(.token.cdata),
-    & :global(.token.char),
-    & :global(.token.inserted),
-    & :global(.token.operator),
-    & :global(.token.property) {
-      color: light-dark(#39adb5, #80cbc4);
-    }
-
-    & :global(.token.class-name),
-    & :global(.token.regex) {
-      color: light-dark(#6182b8, #f2ff00);
-    }
-
-    & :global(.token.comment),
-    & :global(.token.doctype),
-    & :global(.token.prolog) {
-      color: light-dark(#aabfc9, #616161);
-    }
-
-    & :global(.token.deleted),
-    & :global(.token.entity),
-    & :global(.token.selector),
-    & :global(.token.category),
-    & :global(.token.url),
-    & :global(.token.variable) {
-      color: light-dark(#e53935, #ff6666);
-    }
-
-    & :global(.token.hexcode) {
-      color: light-dark(#f76d47, #f2ff00);
-    }
-
-    & :global(.token.number),
-    & :global(.token.unit) {
-      color: light-dark(#f76d47, #fd9170);
-    }
-
-    & :global(.token.punctuation) {
-      color: light-dark(#39adb5, #89ddff);
-    }
-
-    & :global(.token.string) {
-      color: light-dark(#84a657, #a5e844);
-    }
   }
 }
 

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

@@ -0,0 +1,85 @@
+import {
+  transformerNotationDiff,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+  transformerNotationFocus,
+  transformerNotationErrorLevel,
+} from '@shikijs/transformers'
+import type { MarkedExtension, Token } from 'marked'
+import { createHighlighter } from 'shiki'
+
+const highlighter = await createHighlighter({
+  langs: [
+    'astro',
+    'c',
+    'cpp',
+    'csharp',
+    'c#',
+    'cs',
+    'css',
+    'dart',
+    'docker',
+    'dockerfile',
+    'graphql',
+    'gql',
+    'fsharp',
+    'gdscript',
+    'glsl',
+    'bash',
+    'go',
+    'html',
+    'javascript',
+    'json',
+    'latex',
+    'markdown',
+    'mdx',
+    'plsql',
+    'prisma',
+    'powershell',
+    'python',
+    'rust',
+    'sql',
+    'svelte',
+    'toml',
+    'yaml',
+    'vue',
+    'typescript',
+    'xml',
+  ],
+  themes: ['material-theme-darker', 'material-theme-lighter'],
+})
+
+const highlight = async (code: string, lang: string) => {
+  return highlighter.codeToHtml(code, {
+    lang,
+    themes: {
+      dark: 'material-theme-darker',
+      light: 'material-theme-lighter',
+    },
+    defaultColor: 'light-dark()',
+    transformers: [
+      transformerNotationDiff(),
+      transformerNotationHighlight(),
+      transformerNotationWordHighlight(),
+      transformerNotationFocus(),
+      transformerNotationErrorLevel(),
+    ],
+  })
+}
+
+export function ShikiExtension(): MarkedExtension {
+  return {
+    async: true,
+    walkTokens: async (token: Token) => {
+      if (token.type !== 'code') return
+
+      const { lang = 'text', text } = token
+
+      Object.assign(token, {
+        type: 'html',
+        block: true,
+        text: await highlight(text, lang),
+      })
+    },
+  }
+}

…TF/ClientApp/src/utils/KatexExtension.ts …ntApp/src/utils/marked/KatexExtension.tssrc/GZCTF/ClientApp/src/utils/KatexExtension.ts renamed to src/GZCTF/ClientApp/src/utils/marked/KatexExtension.ts src/GZCTF/ClientApp/src/utils/KatexExtension.ts renamed to src/GZCTF/ClientApp/src/utils/marked/KatexExtension.ts

@@ -4,7 +4,6 @@ import { defineConfig, loadEnv } from 'vite'
 import banner from 'vite-plugin-banner'
 import { optimizeCssModules } from 'vite-plugin-optimize-css-modules'
 import Pages from 'vite-plugin-pages'
-import { prismjsPlugin } from 'vite-plugin-prismjs'
 import webfontDownload from 'vite-plugin-webfont-dl'
 import tsconfigPaths from 'vite-tsconfig-paths'
 import i18nVirtualManifest from './plugins/vite-i18n-virtual-manifest'
@@ -76,15 +75,8 @@ export default defineConfig(({ mode }) => {
           },
         ],
       }),
-      prismjsPlugin({
-        languages: 'all',
-        css: true,
-      }),
       i18nVirtualManifest(),
       optimizeCssModules(),
     ],
-    experimental: {
-      enableNativePlugin: true,
-    },
   }
 })